Tạo cửa sổ bật lên theo phương thức có nghĩa là thêm một hộp thoại, tạo ra khi nhấp vào nút và đóng khi người dùng nhấp vào bất kỳ đâu bên ngoài cửa sổ bật lên.
Dưới đây là cách cửa sổ bật lên trông giống như bên dưới với tiêu đề và văn bản. Bạn cũng có thể thêm chân trang vào đó -
Để tạo cửa sổ bật lên theo phương thức bằng CSS và JavaScript, hãy thử chạy mã sau -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #F1F1F1;
background-color: rgba(0,0,0,0.4);
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
.popup-content {
position: fixed;
bottom: 0;
background-color: #ffffff;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.5s;
animation-name: slideIn;
animation-duration: 0.5s
}
.end {
color: white;
float: right;
font-size: 15px;
font-weight: bold;
}
.end:hover,
.end:focus {
color: #000;
text-decoration: underline;
cursor: pointer;
}
.popup-header {
padding: 1px 10px;
background-color: #8AC1E0;
color: white;
}
.popup-body {padding: 1px 5px;}
@-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
@keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
@-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
@keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
</style>
</head>
<body>
<h2>Heading</h2>
<button id="btn">Click for Popup</button>
<div id="myModal" class="popup">
<!-- Modal content -->
<div class="popup-content">
<div class="popup-header">
<span class="end">×</span>
<h2>Header</h2>
</div>
<div class="popup-body">
<p>Demo Text</p>
</div>
</div>
</div>
<script>
var popup = document.getElementById('myModal');
var myBytton = document.getElementById("btn");
var span = document.getElementsByClassName("end")[0];
myBytton.onclick = function() {
popup.style.display = "block";
}
span.onclick = function() {
popup.style.display = "none";
}
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
}
</script>
</body>
</html>