Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
Trong bài thực hành này, chúng ta sẽ tìm hiểu cách đóng một hộp modal bằng HTML, CSS và JavaScript.
Click vào nút button bên dưới để mở modal.
Bạn có chắc muốn delete account này?
Bước 1) Thêm HTML:
Ví dụ
<button id="openModal" type="button">Open Modal</button> <div class="modalContainer"> <span id="mySpanCloseModal" title="Close Modal" onclick="closeModal();">×</span> <div class="contentModal"> <h1>Delete Account</h1> <p>Bạn có chắc muốn delete account này?</p> <button id="btnCancel" type="button" onclick="closeModal();">Cancel</button> <button id="btnDelete" type="button" onclick="closeModal();">Delete</button> </div> </div>
Bước 2) Thêm CSS:
Ví dụ
/* Tạo kiểu cho phần tử nút mở modal */ #openModal { border:none; outline:none; padding:10px 20px; background-color:dodgerblue; color:white; cursor:pointer; border-radius:5px; } #openModal:hover { background-color:violet; } /* Tạo vùng chứa modal cố định, dài rộng 100% */ .modalContainer { position:fixed; top:0; left:0; width:100%; height:100%; background-color:black; background-color:rgba(0,0,0,0.3); z-index:999; display:none; } /* Tạo kiểu cho nút đóng modal */ .modalContainer > span { display:inline-block; position:absolute; font-size:70px; top:100px; right:100px; color:white; cursor:pointer; } .modalContainer > span:hover { color:red; } /* Tạo kiểu cho hộp modal chính */ .modalContainer .contentModal { padding:20px 15px 30px 15px; text-align:center; width:40%; box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); background-color:white; margin:10% auto; border-radius:5px; overflow:hidden; } /* Tạo kiểu cho các nút button bên trong hộp modal */ .modalContainer .contentModal button { border:none; outline:none; padding:10px 0; text-align:center; width:50%; background-color:#999; float:left; margin-top:20px; font-size:16px; cursor:pointer; opacity:0.8; } .modalContainer .contentModal button:hover { opacity:1; } .modalContainer .contentModal #btnDelete { background-color:#F60; color:white; } /* Hiệu ứng rõ dần lên */ @keyframes fadeIn { from {opacity:0;} to {opacity:1;} } /* Hiệu ứng mờ dần xuống */ @keyframes fadeOut { from {opacity:1;} to {opacity:0;} } /* Thay đổi cách hiển thị trên các màn hình nhỏ */ @media screen and (max-width:700px) { .modalContainer .contentModal { width:80%; } .modalContainer > span { top:10px; right:10px; font-size:40px; } }
Bước 3) Thêm JavaScript:
Ví dụ
<script> // Khai báo biến và lấy giá trị var openModal, modalContainer; openModal = document.getElementById('openModal'); modalContainer = document.getElementsByClassName('modalContainer')[0]; // Gán sự kiến click mở hộp modal openModal.onclick = function() { modalContainer.style.display = "block"; modalContainer.style.animation = "fadeIn 1s"; } // Click vào vị trí bất kỳ để đóng modal window.onclick = function(e) { if(e.target == modalContainer) { closeModal(); } } // Định nghĩ hàm đóng modal function closeModal() { modalContainer.style.animation = "fadeOut 0.6s"; setTimeout(function() { modalContainer.style.display = "none"; },500); } </script>