একটি মডাল পপআপ তৈরি করা মানে একটি ডায়লগ বক্স যোগ করা, যা বাটনে ক্লিক করলে জেনারেট হয় এবং ইউজার পপআপের বাইরে যেকোনো জায়গায় ক্লিক করলে বন্ধ হয়।
হেডার এবং টেক্সট সহ একটি পপআপ নিচে কীভাবে দেখায় তা দেখানো হলো। আপনি ফুটারও যোগ করতে পারেন:
CSS এবং জাভাস্ক্রিপ্ট ব্যবহার করে মডাল পপআপ তৈরি করতে নিচের কোডটি চেষ্টা করুন:
উদাহরণ
<!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>
