Cách thực hiện - Cửa sổ trò chuyện bật lên
Tìm hiểu cách tạo cửa sổ trò chuyện bật lên bằng CSS và JavaScript.
Cách tạo một cuộc trò chuyện bật lên
Bước 1) Thêm HTML
Sử dụng phần tử <form> để xử lý đầu vào. Bạn có thể tìm hiểu thêm về điều này trong hướng dẫn PHP của chúng tôi .
Thí dụ
<div class="chat-popup" id="myForm">
<form action="/action_page.php"
class="form-container">
<h1>Chat</h1>
<label for="msg"><b>Message</b></label>
<textarea
placeholder="Type message.." name="msg" required></textarea>
<button type="submit" class="btn">Send</button>
<button
type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
Bước 2) Thêm CSS:
Thí dụ
{box-sizing: border-box;}
/* Button used to open the chat form -
fixed at the bottom of the page */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}
/* The popup chat - hidden
by default */
.form-popup {
display: none;
position:
fixed;
bottom: 0;
right: 15px;
border: 3px solid
#f1f1f1;
z-index: 9;
}
/* Add
styles to the form container */
.form-container {
max-width:
300px;
padding: 10px;
background-color: white;
}
/* Full-width textarea */
.form-container textarea {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
resize: none;
min-height: 200px;
}
/* When the
textarea gets focus, do something */
.form-container textarea:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #04AA6D;
color:
white;
padding: 16px 20px;
border: none;
cursor:
pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
/* Add a red background color
to the cancel button */
.form-container .cancel {
background-color: red;
}
/* Add some hover effects to buttons */
.form-container .btn:hover,
.open-button:hover {
opacity: 1;
}
Bước 3) Thêm JavaScript:
Thí dụ
function openForm() {
document.getElementById("myForm").style.display
= "block";
}
function closeForm() {
document.getElementById("myForm").style.display
= "none";
}
Mẹo: Đi tới Hướng dẫn về Biểu mẫu HTML của chúng tôi để tìm hiểu thêm về Biểu mẫu HTML.
Mẹo: Đi tới Hướng dẫn biểu mẫu CSS của chúng tôi để tìm hiểu thêm về cách tạo kiểu cho các phần tử biểu mẫu.