Home-theater-designers
Cửa sổ bật lên được thiết kế tốt làm cho trang web của bạn tương tác và hiện đại hơn. Họ có thể tạo ra thị trường và thúc đẩy doanh số bán hàng cho doanh nghiệp.
cách gửi email một tệp lớn
Bạn có thể tạo cửa sổ bật lên bằng HTML, CSS và JavaScript. Sử dụng hướng dẫn sau để tạo và định kiểu cửa sổ bật lên từ đầu. Nó làm cho trang web của bạn tương tác và tạo trải nghiệm người dùng tuyệt vời.
TẠO VIDEO TRONG NGÀY CUỘN ĐỂ TIẾP TỤC VỚI NỘI DUNG
Viết HTML để cấu trúc nội dung
Hãy viết một số mã HTML có cửa sổ phương thức ẩn bật lên khi bạn nhấp vào nút. Trong trường hợp này, bạn sẽ hiển thị nghĩa của từ Xin chào! Cửa sổ bật lên sẽ có tiêu đề và một số nội dung.
Ngay lập tức bạn kích hoạt cửa sổ phương thức, một hiệu ứng mờ sẽ xuất hiện trên nền. Thêm các lớp vào các phần mà bạn sẽ sử dụng để chọn phương thức sau này trong JavaScript.
<body>
<button class="open-modal">Hello!</button>
<div class="modal-content hidden-modal">
<div class="modal-header">
<h3>Meaning of Hello!</h3>
<button class="close-modal">×</button>
</div>
<div class="modal-body">
<p>Hello is a greeting in the English language. It is used at
the start of a sentence as an introduction whether in person or
on the phone.</p>
</div>
</div>
<div class="blur-bg hidden-blur"></div>
<script src="script.js"></script>
</body>
Trang sẽ xuất hiện như vậy:
Bạn cũng có thể muốn điều tra phần tử hộp thoại HTML nếu bạn đang muốn sử dụng đánh dấu ngữ nghĩa nhất.
Viết CSS để thêm kiểu
Sử dụng CSS để định dạng cửa sổ bật lên. Đặt cửa sổ ở giữa trang web trên nền đen để nó có thể nhìn thấy rõ ràng. Bạn cũng sẽ tạo kiểu cho cửa sổ, nền và cỡ chữ của nó.
Đầu tiên, tạo một kiểu thống nhất cho toàn bộ trang bằng cách đặt lề, phần đệm và chiều cao dòng. Sau đó, căn chỉnh các thành phần cơ thể ở trung tâm trên nền sau.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1;
}
body {
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
background: #000;
gap: 30px;
}
Tiếp theo, tạo kiểu cho phương thức mở cái nút. Tạo cho nó một màu nền khác với phần còn lại của trang để nó nổi bật. Ngoài ra, hãy đặt màu phông chữ, kích thước, phần đệm và thời gian chuyển tiếp.
.open-modal {
background: #20c997;
color: #fff;
border: none;
padding: 20px 40px;
font-size: 48px;
border-radius: 100px;
cursor: pointer;
transition: all 0.3s;
outline: none;
}
.open-modal:active {
transform: translateY(-17px);
}
Sau đó, tạo kiểu cho nội dung phương thức sẽ hiển thị khi cửa sổ mở ra. Đặt nền trắng, đặt chiều rộng nhỏ hơn phần thân và thêm phần đệm.
Cũng cung cấp cho nó một chỉ mục z, để nó xuất hiện ở phía trước phương thức mở cái nút. Ngoài ra, đặt phương thức ẩn hiển thị là không, vì vậy nó sẽ ẩn cho đến khi bạn kích hoạt nó.
.modal-content {
background: #ccc;
width: 500px;
padding: 20px;
border-radius: 10px;
z-index: 99;
}
.modal-header {
display: flex;
justify-content: space-between;
margin-bottom: 16px;
color: #000;
font-size: 30px;
}
.modal-body p {
font-size: 22px;
line-height: 1.5;
}
.hidden-modal {
display: none;
}
Sau đó tạo kiểu phương thức gần gũi với nền trong suốt và căn chỉnh nó ở giữa.
.close-modal {
background: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
height: 20px;
width: 20px;
font-size: 40px;
}
.close-modal:hover {
color: #fa5252;
}
Cuối cùng, tạo kiểu cho phần tử mờ sẽ xuất hiện trên nền khi cửa sổ mở ra. Nó sẽ có chiều cao và chiều rộng tối đa và bộ lọc nền. Đặt hiệu ứng làm mờ thành không có gì để hiệu ứng mờ không hiển thị cho đến khi cửa sổ mở ra.
.blur-bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
}
.hidden-blur {
display: none;
}
Sau khi thêm CSS, trang sẽ trông như thế này:
Kiểm soát cửa sổ bật lên bằng mã JavaScript
Bạn sẽ sử dụng JavaScript để mở và đóng cửa sổ phương thức bằng cách hiển thị hoặc ẩn nó. Thêm vào người nghe sự kiện vào nút để kích hoạt nó mở và đóng khi bạn nhấp vào.
Trước tiên, hãy chọn các thành phần có liên quan bằng cách sử dụng các lớp CSS mà bạn đã xác định trong HTML:
let modalContent = document.querySelector(".modal-content");
let openModal = document.querySelector(".open-modal");
let closeModal = document.querySelector(".close-modal");
let blurBg = document.querySelector(".blur-bg");
Thêm một trình lắng nghe sự kiện vào phương thức mở để nó mở cửa sổ khi bạn bấm vào nó.
openModal.addEventListener("click", function () {
modalContent.classList.remove("hidden-modal");
blurBg.classList.remove("hidden-blur");
});
Thực hiện các hành động ngược lại để xử lý việc đóng cửa sổ bật lên, nhưng lần này, hãy bọc chúng trong một hàm được đặt tên. Điều này sẽ xử lý hành vi cho nhiều sự kiện có thể khiến cửa sổ phương thức đóng lại:
let closeModalFunction = function () {
modalContent.classList.add("hidden-modal")
blurBg.classList.add("hidden-blur")
}
Thêm trình xử lý sự kiện để xử lý các lần nhấp vào nút nền hoặc nút đóng và trường hợp người dùng nhấn phím Escape.
blurBg.addEventListener("click", closeModalFunction);
closeModal.addEventListener("click", closeModalFunction);
document.addEventListener("keydown", function (event) {
if (event.key === "Escape"
&& !modalContent.classList.contains("hidden")
) {
closeModalFunction();
}
});
Bây giờ, khi bạn bấm vào Xin chào! nút, phương thức xuất hiện. Bạn có thể đóng nó bằng cách nhấp vào nút hủy ở bên phải cửa sổ. Xem mã trên codepen.io và tương tác với phương thức:
Công dụng của Popup Windows
Công dụng chính của cửa sổ bật lên/cửa sổ phương thức trong phát triển web là tập trung vào một mục cụ thể trên trang web. Sau khi được kích hoạt, nó sẽ hủy kích hoạt phần còn lại của trang khiến người dùng chú ý đến nó.
Cửa sổ bật lên làm sinh động giao diện người dùng của bạn. Chúng có thể cảnh báo và thu hút sự chú ý đến thông tin quan trọng trên trang web cho người dùng của bạn. Để xóa cửa sổ, người dùng phải thực hiện một số hành động. Bằng cách này, người dùng có thể tương tác với cửa sổ và nhận thông tin mong muốn.
làm thế nào để sàng lọc bản ghi snapchat mà họ không biết