Để xây dựng trang web với tính năng pop-up thông báo sử dụng jQuery, bạn có thể thực hiện các bước sau:
Tạo HTML cơ bản cho trang web
Đặt một nút để người dùng có thể nhấp để mở pop-up thông báo.
<!DOCTYPE html>
<html>
<head>
<title>Pop-up Notification</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="popup.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button id="show-popup">Click me to show pop-up</button>
</body>
</html>
Tạo CSS cho pop-up thông báo
.popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #000;
max-width: 500px;
}
.popup-content h2 {
margin-top: 0;
}
.popup-content p {
margin-bottom: 0;
}
Tạo jQuery để hiển thị và ẩn pop-up thông báo
$(document).ready(function(){
$("#show-popup").click(function(){
$(".popup-container").fadeIn();
});
$(".popup-container").click(function(){
$(".popup-container").fadeOut();
});
});
Trong đó, khi người dùng nhấp vào nút “show-popup”, hộp thoại pop-up sẽ được hiển thị với hiệu ứng fade in. Khi người dùng nhấp vào hộp thoại pop-up, hộp thoại sẽ được ẩn đi với hiệu ứng fade out.
Tạo tệp popup.js và style.css và liên kết đến trang web.
Sau khi hoàn thành các bước trên, bạn đã hoàn thành trang web với tính năng pop-up thông báo sử dụng jQuery. Bạn có thể tùy chỉnh nội dung và hiệu ứng của pop-up thông báo theo ý muốn.