Create a Popup Window Using HTML, CSS, and JavaScript

Popup window is defined as a very important role for your website, a well-designed popup window makes your website more interactive and modern. They can create markets and increase sales for businesses. Learn how to create great popups using standard web techniques.

You can Open popup Window on button click JavaScript. Use the guide below to create and style a popup window from scratch. It makes your website interactive and creates a great user experience.

How to Open Popup Window on button click JavaScript

Write HTML to structure the content.

Let’s write some HTML code that contains a hidden modal window that pops up when a button is clicked. In this case, you would display the meaning of the word Hello! The popup window will have a title and some content.

The blur is applied to the background when you trigger the modal window. Add classes to the classes to choose the model that you will use later on in JavaScript.

<body>      
<button class="open-modal">Hello!</button>
   
<div class="modal-content hidden-modal">
     
<div class="modal-header">
       
<h3>Welcome to Hello Page</h3>
       
<button class="close-modal">&times;</button>
     
</div>
     
<div class="modal-body">
       
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quae nisi          
porro ea numquam dolore exercitationem commodi alias incidunt,
tempora velit!</p>      
</div>
   
</div>
   
<div class="blur-bg hidden-blur"></div>
   
<script src="script.js"></script>

</body>
 

The page should appear like so:

Write CSS to Add Style

Use CSS to format the popup window. Place the window in front of a black background in the middle of the web page so that it is visible. You’ll also style the window, its background, and font size.

First, create a uniform style for the entire page by setting margins, padding, and line height. The centre aligns the body elements to the background.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}

body {
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background: #000;
  gap: 30px;
}

Next, style the open-modal button. Give it a different background color than the rest of the page so it stands out. Also, set its font color, size, padding, and transition time.

.open-modal {
  background: #cadc0a;
  color: #fff;
  border: none;
  margin-top: 50px;
  padding: 20px 40px;
  font-size: 48px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s;
  outline: none;
}

.open-modal:active {
  transform: translateY(-17px);
}

Then, style the model content to display when the window opens. Set a white background, give it a smaller width than the body, and add padding.

Also, give it a z-index so that it appears in front of the open-model button. Additionally, set the hidden-model display to None, so that it remains hidden until you trigger it.

.modal-content {
  background: #ccc;
  width: 500px;
  padding: 20px;
  border-radius: 10px;
  z-index: 99;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  color: #000;
  font-size: 30px;}
.modal-body p { font-size: 22px; line-height: 1.5; } .hidden-modal { display: none; }

Then style the close-model button with a transparent background and align it to the center.

.close-modal {
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  width: 20px;
  font-size: 40px;}
.close-modal:hover { color: #fa5252; }

Finally, style the blurred element to be cast in the background when the window opens. It will have a maximum height and width and a background filter. Set the Opacity to None so that it is not visible until the window is open.

.blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
}

.hidden-blur {
  display: none;
}

After adding the CSS, the page should look like this:

Control the Popup with JavaScript Code

You’ll use JavaScript to open and close the modal window by showing or hiding it. Add event listeners to the button and trigger it to open and close when you click it.

First, select the relevant element using the CSS classes you've defined in the HTML:
let modalContent = document.querySelector(".modal-content");
let openModal = document.querySelector(".open-modal");
let closeModal = document.querySelector(".close-modal");
let blurBg = document.querySelector(".blur-bg");

Add an event listener to the open-module button so that when you click it the window opens.

openModal.addEventListener("click", function () {
  modalContent.classList.remove("hidden-modal");
  blurBg.classList.remove("hidden-blur");
});

Do the opposite of handling closing popups but, this time, wrap them in a named function. This will handle the behavior of several events that can cause the modal window to be closed:

let closeModalFunction = function () {
  modalContent.classList.add("hidden-modal");
  blurBg.classList.add("hidden-blur");
};

Add an event listener to handle a click on the background or close button and the user presses the escape key.

blurBg.addEventListener("click", closeModalFunction);
closeModal.addEventListener("click", closeModalFunction);

document.addEventListener("keydown", function (event) {
  if (event.key === "Escape" && !modalContent.classList.contains("hidden")) {
    closeModalFunction();
  }
});

Now, when you click on Hello! button, the model appears. You can close the window by clicking the Cancel button on the right. View code and interact with models on codepen.io:

If you want to check out how the actual code works then click here. You can download the complete HTML, CSS, and JS files that we just created, download here from GitHub.

Uses of Popup Windows

The main use of popup windows in web development is to focus on a specific item on a website. Once triggered, it pauses the rest of the page, prompting the user to pay attention to it.

Popup windows animate your UI and can draw attention to important information on a webpage for your users. The user has to perform some kind of action to remove the window. This way the user can interact with the window and get the information they want.

Here is a guide on keyword research, it will help you to use free tools to find less competitive keywords to rank in SERP. This is the end of the ultimate guide on types of SEO and you have learned what SEO means.

Recommended for you – Top 6 CSS Tips for Web Designing Skills

If you have any queries or advice regarding this post, feel free to write in the comment box, we respect your every comment and are committed to answering your asked questions. If you think this knowledge should be shared with someone else, share it in all your groups, thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!