การสร้าง modal popup หมายถึงการเพิ่มกล่องโต้ตอบ ซึ่งเกิดขึ้นเมื่อคลิกปุ่ม และปิดเมื่อผู้ใช้คลิกที่ใดก็ตามนอกพื้นที่ popup
นี่คือรูปแบบ popup พร้อม header และข้อความ คุณยังสามารถเพิ่ม footer ได้:
เพื่อสร้าง modal popup ด้วย CSS และ JavaScript ลองรันโค้ดต่อไปนี้:
ตัวอย่าง
<!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>