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.
You should read it
- How to remove fake popup window 'Update Flash Player' or 'Update Java'?
- How to turn off the chat frame automatically appears on the website
- How to turn off Location, Javascript, Flash, Popup, Cookies, Camera on Cốc Cốc, Chrome, Edge, Firefox
- How to make PIN Pad using HTML CSS & JavaScript
- How to create a simple contact form using HTML, CSS, and JavaScript
- Tutorial for creating 3D photo effects in Photoshop (Part 1)
- Instructions for blocking ads on Yahoo Messenger
- How to remove malicious software (malware) on Android applications?
May be interested
- Successfully created 2-way chat framework on the web with only CSS and HTMLin fact, most of the chat features on the web have something in common that is developed based on javascript ...
- How to Create a Simple CSS Popup in Your Web Pagethis is an article about how to create a simple css popup in your webpage. the example here creates a popup for age verification while loading your webpage, but the code can be adapted for other scenarios. if yes is clicked, the popup...
- 5 free online HTML editing tools that test the best codeif you ask someone how to become web developers, they will tell you about javascript, python, web programming, etc. and of course html.
- How to create a word counter in JavaScriptyou can create your own word counter using html, css, and javascript. open the word counter in your web browser, enter your text in the input field and see how many words you've written.
- Programming blockchain part 2: Javascript programming languagealong with html and css, it is one of three core technologies in world wide web content production. javascript is often used to create highly interactive websites.
- HTML formthe form in html contains form elements - the element types that take input data such as filling in text fields, checkboxes, buttons, submit buttons ...
- How to turn off Location, Javascript, Flash, Popup, Cookies, Camera on Cốc Cốc, Chrome, Edge, Firefoxhow to turn off location, javascript, flash, popup, cookies, camera on cốc cốc, chrome, edge, firefox. these are important components that make up the content of a website. however in some cases we need to turn them on or off
- Table in HTMLwhat does it take to create a table in html? is it complicated? want to add color to the table border, how to add the background color to the text in the table? in this article tipsmake.com will answer those questions and guide you to basic operations with tables on html, in addition to adding alternate color schemes for rows in the html table. invite you to follow along.
- List in HTMLthis tutorial explains how to create lists in html.
- Introduction to HTMLa few basic things to know about html before starting to learn this language.