How to create a Popup Box with HTML, CSS and JavaScript

In this article, We will see How to Create a Popup Box in HTML, CSS & JavaScript ?

To create a popup box in HTML ,CSS & Javascript, you can use a combination of HTML, CSS, and some JavaScript for the interactivity.

Here's an example:

HTML

<button id="myButton">Open Popup</button>
<div id="myPopup" class="popup">
  <div class="popup-content">
    <span class="close">&times;</span>
    <h2>Popup Title</h2>
    <p>This is the content of the popup.</p>
  </div>
</div>

CSS

  .popup {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .popup-content {
            background-color: #fff;
            margin: 10% auto;
            padding: 20px;
            width: 100%;
            max-width: 800px;
            height: 200px;
            border-radius: 15px;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        #myButton {
            cursor: pointer;
            border: none;
            padding: 1rem;
            background: blue;
            color: #fff;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            /* width: 100%; */
            margin: 20rem auto;
        }

Javascript

// Open the popup when the button is clicked
document.getElementById("myButton").addEventListener("click", function () {
  document.getElementById("myPopup").style.display = "block";
});

// Close the popup when the close button is clicked
document.querySelector(".close").addEventListener("click", function () {
  document.getElementById("myPopup").style.display = "none";
});

OUTPUT:

In this example, the popup is opened by pressing a button. The popup is shown by setting its display property to block when the button is clicked. An event listener is attached to the popup's close button, which, when clicked, causes the popup to disappear by changing its display property to none.

The popup's styles and content can be altered to suit your requirements.

Happy Coding  😎