Gồm 03 file HTML - CSS - Javascript
File 01 - HTML
Đặt tên gì cũng được miễn là đuôi .html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="modal.css">
<title>Modal Box Example</title>
</head>
<body>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div><!-- END modal-content -->
</div><!-- END myModal -->
<script src="modal.js"></script>
</body>
</html>
File 02 - modal.css
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
p/S: Nếu dùng chung vs Bootstrap => dùng thẻ inline để ghi đè các thuộc tính này
File 03 - modal.js
// Lấy modal
var modal = document.getElementById("myModal");
// Lấy cái nút khi bấm vào mở modal
var btn = document.getElementById("myBtn");
// Lấy thẻ <span> dùng đóng modal
var span = document.getElementsByClassName("close")[0];
// Khi người dùng bấm vào nút, MỞ modal
btn.onclick = function() {
modal.style.display = "block";
}
// Khi người dùng bấm vào nút <span> (x), đóng modal
span.onclick = function() {
modal.style.display = "none";
}
// Khi người dùng bấm vào bất kỳ nơi nào bên ngoài modal, đóng lại
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Nếu vẫn chưa rõ các bạn xem thêm video clip sau:
...
Sưu tầm bởi #drM
Không có nhận xét nào:
Đăng nhận xét