मॉडल पॉपअप बनाने का अर्थ है एक डायलॉग बॉक्स जोड़ना, जो बटन पर क्लिक करने पर उत्पन्न होता है और जब उपयोगकर्ता पॉपअप के बाहर कहीं भी क्लिक करता है तो बंद हो जाता है।
यहाँ नीचे एक पॉपअप कैसा दिखता है हेडर और टेक्स्ट के साथ। आप इसमें फुटर भी जोड़ सकते हैं -
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>
