Create a Popup Box with Html, CSS and JavaScript

Create a Popup Box with Html, CSS and Vanilla JavaScript

In this article, we will learn how to make a simple modal/popup box using HTML, CSS, and Javascript.

According to Wikipedia, In user interface design for computer applications, a popup box is a graphical control element subordinate to an application’s main window.

A popup box provides a mode in which the primary window is disabled but remains visible, with the popup window acting as a child window in front of it.

Before returning to the parent application, users must engage with the popup box . This prevents the main window’s operation from being disrupted. Because they frequently display a dialog box, popup box are sometimes known as heavy box or modal dialogs.

To create a popup box in HTML, CSS, and Javascript what we do is we create a child window with related contents. The window is kept hidden using CSS and upon triggering (either by click event or time interval) it is displayed. The popup box is provided with a close button to close it. Usually, modals are used to popup some offers, alerts, or to show subscribe options.

Follow the code to make a simple popup box in HTML, CSS, and Javascript.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popup Box with Html</title>

  <link rel="stylesheet" href="./style.css" /> 
  </head>
  <body>
    <!-- welcome , lets make a modal -->
    <!-- this button will toggle modal visiblity -->
    <button>Click Me</button>

    <div class="modal-wrapper">
      <div class="modal">
        <div class="modal-close">X</div>
        <div class="modal-content">
          <h2>Hello There</h2>
          <p>To get Notification about our update please do subscribe!!!</p>
          <a href="#">Follow</a>
        </div>
      </div>
    </div>

    <script src="./app.js"></script>
  </body>
</html>

The code starts with a meta tag that sets the character set to UTF-8. The next line is a meta tag for IE compatibility, which tells browsers that they should use the edge version of Internet Explorer. Next, there is a meta tag for viewport, which specifies how wide the browser window should be on mobile devices and other screens. Finally, there is one link to external style sheets.

The code is a web page with a button that will toggle the visibility of an overlay. Code also has some text and an image. The code is a simple example of how to create a modal. The code above contains the following: A button which will toggle the visibility of the modal. A div with class “modal-wrapper” and “modal-content” which will hold the content of the modal.

The script tag that points to app.js, this file is where all our javascript logic will be written in.

HTML Output

html output of Popup Box with Html

You Might Like This:

JavaScript Code

let modal = document.querySelector(".modal-wrapper");
let btn = document.querySelector("button");
let close_btn = document.querySelector(".modal-close");

btn.addEventListener("click", display);

//  display the modal after 3 second of page load

setTimeout(() => {
  display();
}, 3000);

function display() {
  modal.style.display = "block";
}

//  when the user clicks on X button,close the modal
close_btn.addEventListener("click", hide);

// when user clicks anywhere outside the modal, close modal
window.addEventListener("click", (event) => {
  if (event.target == modal) {
    modal.style.display = "none";
  }
});

function hide() {
  modal.style.display = "none";
}

The code starts by creating a variable called modal. This is the wrapper div that will contain the modal. The code then creates a button and attaches an event listener to it so that when someone clicks on it, the display function will be executed. The next line of code creates a variable called btn which is assigned to the button created in step 2.

Then, another variable called close_btn is created and assigned to the .modal-close class selector (the element with id=”modal-close”).

Finally, an event listener for click events is attached to btn so that when someone clicks on it, display() will be executed after 3 seconds of page load time. The code is meant to display a modal after 3 seconds of page load. then button click event listener is used to display the modal.

CSS Code

.modal-wrapper {
  background: rgba(0, 0, 0, 0.508);
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
}
.modal {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  max-width: 300px;
  width: 100%;
  background: wheat;
  padding: 20px;
  margin: 35vh auto;
  border-radius: 5px;
  position: relative;
}
.modal a {
  text-decoration: none;
  background: crimson;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  margin: 10px;
}
.modal-close {
  color: red;
  border: 1px solid black;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  width: 20px;
  border-radius: 5px;
}
button {
  background: crimson;
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  margin: 10px auto;
  cursor: pointer;
}

The code starts by creating a modal with the class “modal-wrapper”. The background of this wrapper is set to be rgba(0, 0, 0, 0.508). This value represents the color in hexadecimal notation. It starts off as white and then gradually becomes more transparent until it’s completely invisible.

Then the code creates a div that has the class “modal” inside of it and sets its width to 300px. Inside of this div are two spans: one for text and one for an image. The code will display a modal window with the text “Hello, world!” on it. The background of the modal window is set to be white. The width and height of the modal window are set to be 100%.

Final Output

css output of Create a Popup Box with Html, CSS and JavaScript
Create a Popup Box with Html, CSS and JavaScript

 

You have completed learning how to create a Popup Box with Html, CSS and Vanilla JavaScript

3D Card Rotate On Mouseover

50+ Frontend Project Code 

If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram.

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – Vidyasheela

written by – Ninja_webTech

 

Share on:

Leave a Comment