Create a Popup Box with Html, CSS and JavaScript

How to Create Popup Box Using HTML and CSS?

Create a Popup Box with HTML ,CSS, and JAVASCRIPT

In this article, we learn how to make a simple modal/popup box using HTML, CSS, and Javascript. According to the 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 boxes are sometimes known as heavy boxes or modal dialogs.

50+ HTML, CSS & JavaScript Projects With Source Code:-

Live Preview:-

 

Code byVidyasheela
Project DownloadLink Available Below
Language usedHTML ,CSS and JavaScript
External link / DependenciesNo
ResponsiveYes
Popup Box Table

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>

For creating the structure for our popup box, we added some important links inside the head and body sections. As the project is made of HTML, CSS, and JavaScript, we have created different files. Now we will link them up to add the CSS and JavaScript inside our popup box.

Simple Portfolio Website Using Html And Css With Source Code

Now inside our body tag, we will first create a “click me” button using the button tag, and then we will create a modal-wrapper container for our popup box. Using the tag selector, we will add a heading for our popup box, and then using the tag, we will add a paragraph to add the notification inside our popup box.

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

HTML Output:-

How to Create Popup Box Using HTML and CSS?

You Might Like This:-

JavaScript Code For Popup Box:-

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";
}

  • First, we will select the HTML elements from the document using the let keyword and query selector () method. We will store the value in these variables. These elements are what we will use to add the popup functionality inside the popup message.
  • The style will be used to generate a display function. employing the windows, the display value is set to “block.” We set the display to none when we click the addEventListener button.
  • We will now give the button a “click” event listener. We will show the message after 3 seconds by using the setTimeout() method.

Restaurant Website Using HTML and CSS

.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 background of this project (pop up code in html css) will be set to “black” using the class selector (.modal-wrapper), and the container’s position will be set to “fixed” using the position property. The display is set to “none,” and the width and height are both 100%. The font family will be set to Arial by the modal.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

ADVERTISEMENT

Using the class selector (.modal-close) the color is set to the red and using the border property we will add a border of 1px solid black. The position is set to the absolute and the border-radius we will add a border radius of 5 px.

ADVERTISEMENT

Now using the button tag selector we will set the background as “crimson” and using the color property we will set the color as “white” and using the border-radius property we will set a border radius of 5px to the button .

ADVERTISEMENT

CSS Output:-

How to Create Popup Box Using HTML and CSS?

ADVERTISEMENT

ADVERTISEMENT

Final Output:-

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

3D Card Rotate On Mouseover

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

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

Visit more article:- codewithrandom

FAQs:-

Which programming languages have been used in it?

How to Create Popup Box

CSS, HTML, JAVASCRIPT have been used in this Popup Box project.

How to create a button in a pop-up box

How to Create Popup Box button

We created a button in the pop-up box by using this function.
<button>Click Me</button>



Leave a Reply