Cách tạo: cửa sổ trò chuyện弹出聊天窗口

Cách tạo cửa sổ trò chuyện弹出聊天窗口

Bước 1 - Thêm HTML:

Sử dụng <form> để xử lý đầu vào. Bạn có thể tìm hiểu thêm thông tin liên quan trong giáo trình PHP của chúng tôi.

<div class="chat-popup" id="myForm">
  <form action="/action_page.php" class="form-container">
    <h1>Trò chuyện</h1>
    <label for="msg"><b>Tin nhắn</b></label>
    <textarea placeholder="Nhập tin nhắn..." name="msg" required></textarea>
    <button type="submit" class="btn">Gửi</button>
    <button type="button" class="btn cancel" onclick="closeForm()">Đóng</button>
  </form>
</div>

Bước 2 - Thêm CSS:

{box-sizing: border-box;}
/* Sử dụng để mở biểu mẫu trò chuyện - cố định ở dưới cùng của trang */
.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;
}
/* Mở cửa sổ trò chuyện - ẩn mặc định */
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 15px;
  border: 3px solid #f1f1f1;
  z-index: 9;
}
/* Thêm樣式 cho khung biểu mẫu */
.form-container {
  max-width: 300px;
  padding: 10px;
  background-color: white;
}
/* Vùng văn bản toàn rộng */
.form-container textarea {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
  resize: none;
  min-height: 200px;
}
/* Thực hiện một số hành động khi vùng văn bản được tập trung */
.form-container textarea:focus {
  background-color: #ddd;
  outline: none;
}
/* Đặt樣式 cho nút gửi/đăng nhập */
.form-container .btn {
  background-color: #04AA6D;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}
/* Thêm màu nền đỏ cho nút hủy */
.form-container .cancel {
  background-color: red;
}
/* Thêm một số hiệu ứng khi di chuột qua nút */
.form-container .btn:hover, .open-button:hover {
  opacity: 1;
}

Bước 3 - Thêm JavaScript:

function openForm() {
  document.getElementById("myForm").style.display = "block";
}
function closeForm() {
  document.getElementById("myForm").style.display = "none";
}

Thử ngay

Trang liên quan

Hướng dẫn:HTML biểu mẫu

Hướng dẫn:CSS biểu mẫu