How to create a popup using HTML, CSS and JavaScript

 

Use HTML to create content structure

Write some HTML code that contains a hidden modal window that pops up when you click a button. In this case, you'll show a meaningful word, like Hello! Popup windows usually have a title and some content.

On when the popup window is activated, a blur effect will appear on the background. Add the class to the section you use to select the method later in JavaScript.

Meaning of Hello!

Hello is a greeting in the English language. It is used at the start of a sentence as an introduction whether in person or on the phone.

The page will appear like this:

Use CSS for styling

Use CSS to format the popup window. Place the window in the center of the web page on a black background, it will be clearly visible. You also need to style the window, background and font size.

First, create a uniform style for the entire page by setting margins, padding, and line-height. Then align the elements in the body to the center on 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, create an open-modal button . Color the rest of the page differently so it stands out. Also, set font color, size, padding and transition time.

.open-modal {     background: #20c997;     color: #fff;     border: none;     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 content that will appear when the window opens. Set a white background, set its length smaller than the body, and add padding.

Then give it a z-index, so that it appears in front of the open-modal button . Also, setting hidden-modal is now none. It will stay hidden until you activate 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-modal 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 blur element, which will appear in the background when the window opens. It will have a maximum height and width with the same background filter. Set the opacity to none so it won't show until the window opens.

.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 popups with JavaScript code

You will use JavaScript to open and close the popup window by showing or hiding it. Add an event listener to the button click to trigger it to open & close when you click it.

First, select the related elements using the CSS class you 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-modal click button so that it opens the window when you click it.

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

Take the opposite actions to handle closing the popup, but for now, wrap them in a named function. This action will handle the behavior for multiple events that can cause the popup window to close.

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

Add event listeners to handle background or close button clicks. In this case, 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 I click the Hello! , popup will appear. You can close it by clicking the cancel button on the right side of the window.

It's done! Hope the article is useful to you.