Teach with us

How to create a modal popup using JavaScript and CSS?

Creating a modal popup means adding a dialog box, which generates on click of a button and close when user clicks anywhere outside of the popup.

Here’s how a popup looks like below with header and a text. You can also add a footer to it −

To create a modal popup using CSS and JavaScript, try to run the following code −

Example

Live Demo

<!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>
Updated on 16-Jun-2020 13:05:24

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements