How to create popups with CSS and JavaScript?


A popup appears on the click of a button. Add any key message in it. To close the popup, set a cross symbol on top-right. However, the popups generally close when the mouse cursor is placed somewhere else on the web page.

Set a button to open the popup

First, create a button that will be clicked by the user to open the popup −

<button class="openPopUp">Open Popup</button>

Set the container for the popup

A div is set for the popup. Withing that, a child container is created for the popup content. Within that, set the close symbol using the × HTML Character code −

<div class="popUp">
   <div class="popupContent">
      <span class="close">×</span>
      <p>Sample text inside popup</p>
   </div>
</div>

Position the popup

To position the popup, use the position property and set it to fixed. The display property is set to none because the popup will be visible only when the button is clicked, else it remains hidden −

.popUp {
   text-align: center;
   display: none;
   position: fixed;
   z-index: 1;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
}

The popup content

Within the popup, the message area is set with width 80% −

Within the popup, the message area is set with width 80%:
.popupContent {
   font-size: 20px;
   font-weight: bold;
   background-color: #fefefe;
   margin: auto;
   padding: 20px;
   border: 1px solid #888;
   width: 80%;
}

Style the close button

The close button is positioned to the right using the float property −

.close {
   color: rgb(255, 65, 65);
   float: right;
   font-size: 40px;
   font-weight: bold;
}

Hovering the close button

With that, on hover the cursor property is set to pointer to make it look clickable −

.close:hover,
.close:focus {
   color: #ff1010;
   cursor: pointer;
}

Example

To create popups with CSS and JavaScript, the code is as follows −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: Arial, Helvetica, sans-serif;
      }
      .popUp {
         text-align: center;
         display: none;
         position: fixed;
         z-index: 1;
         padding-top: 100px;
         left: 0;	
         top: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.4);
      }
      .popupContent {
         font-size: 20px;
         font-weight: bold;
         background-color: #fefefe;
         margin: auto;
         padding: 20px;
         border: 1px solid #888;
         width: 80%;
      }
      .close {
         color: rgb(255, 65, 65);
         float: right;
         font-size: 40px;
         font-weight: bold;
      }
      .close:hover,
      .close:focus {
         color: #ff1010;
         cursor: pointer;
      }
   </style>
</head>
<body>
   <h1>Popup Example</h1>
   <button class="openPopUp">Open Popup</button>
   <h2>Click on the above button to open the popup</h2>
   <div class="popUp">
      <div class="popupContent">
         <span class="close">×</span>
         <p>Sample text inside popup</p>
      </div>
   </div>
   <script>
      var popUp = document.querySelector(".popUp");
      var btn = document.querySelector(".openPopUp");
      var span = document.querySelector(".close");
      
      btn.addEventListener("click", () => {
         popUp.style.display = "block";
      });
      
      span.addEventListener("click", () => {
         popUp.style.display = "none";
      });
      
      window.onclick = function(event) {
         if (event.target == popUp) {
            popUp.style.display = "none";
         }
      };
   </script>
</body>
</html>

Updated on: 14-Dec-2023

407 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements