How to Create Popup Box using HTML and CSS? Last Updated : 10 Jan, 2025 Comments Improve Suggest changes Like Article Like Report Popups are useful for displaying alerts, forms, notifications, or additional information. Here are three common methods to create a popup box:1. Using Display PropertyThis method toggles the popup's visibility by changing its CSS display property. HTML <html> <head> <style> .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .popup-content { background: #fff; padding: 20px; border-radius: 5px; text-align: center; } .popup:target { display: flex; } </style> </head> <body> <a href="#popup" style="padding: 10px 20px; background-color: #007BFF; color: #fff; text-decoration: none; border-radius: 5px;">Open Popup</a> <div id="popup" class="popup"> <div class="popup-content"> <h2>Popup Title</h2> <p>This is a simple popup box.</p> <a href="#" style="display: inline-block; margin-top: 10px; padding: 5px 10px; background-color: #dc3545; color: #fff; text-decoration: none; border-radius: 3px;">Close</a> </div> </div> </body> </html> In this Example:Visibility Control: The .popup element is initially hidden with display: none; and becomes visible when its id matches the URL fragment (:target).Centered Popup: Flexbox properties center the popup content both vertically and horizontally within the viewport.2. Using JavaScript EventListenerThis approach uses JavaScript to dynamically show and hide the popup based on user interactions. HTML <html > <head> <style> .popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .popup-content { background: #fff; padding: 20px; border-radius: 5px; text-align: center; } </style> </head> <body> <button id="openPopup" style="padding: 10px 20px; background-color: #28a745; color: #fff; border: none; border-radius: 5px;">Open Popup</button> <div id="popup" class="popup"> <div class="popup-content"> <h2>Popup Title</h2> <p>This popup is controlled with JavaScript.</p> <button id="closePopup" style="margin-top: 10px; padding: 5px 10px; background-color: #dc3545; color: #fff; border: none; border-radius: 3px;">Close</button> </div> </div> <script> const openPopup = document.getElementById('openPopup'); const closePopup = document.getElementById('closePopup'); const popup = document.getElementById('popup'); openPopup.addEventListener('click', () => { popup.style.display = 'flex'; }); closePopup.addEventListener('click', () => { popup.style.display = 'none'; }); window.addEventListener('click', (event) => { if (event.target === popup) { popup.style.display = 'none'; } }); </script> </body> </html> Event Listeners: JavaScript addEventListener methods handle opening and closing the popup based on user clicks.Overlay Click to Close: Clicking outside the popup content (on the overlay) closes the popup, enhancing usability.3. Using JavaScript SweetAlert LibrarySweetAlert provides a simple way to create beautiful popup boxes with minimal code. HTML <html> <head> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } button { padding: 10px 20px; background-color: #17a2b8; color: #fff; border: none; border-radius: 5px; cursor: pointer; } </style> </head> <body> <button onclick="showPopup()">Show Popup</button> <script> function showPopup() { Swal.fire({ title: 'Welcome!', text: 'This is a SweetAlert popup.', icon: 'info', confirmButtonText: 'Cool' }); } </script> </body> </html> In this Example:External Library: SweetAlert is loaded via a CDN to provide pre-styled popup functionality.Customizable Alerts: The Swal.fire method displays a popup with specified title, text, and icon. Comment More infoAdvertise with us Next Article How to Create Popup Box using HTML and CSS? sourabhsahu33 Follow Improve Article Tags : HTML HTML-Questions CSS-Questions JavaScript-Questions Similar Reads How to Create a Modal Box using HTML CSS and JavaScript? We will learn how to create a modal dialog box using HTML, CSS, and JavaScript. A modal is a pop-up dialog that appears on top of the main content and requires the user to interact with it before returning to the main screen.Approach to Create Modal BoxHTML Structure:Create a button that opens the m 2 min read How to Create Neon Light Button using HTML and CSS? The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc 2 min read How To Create an Alert Message Box using CSS? An alert message box using CSS is a styled container that displays important messages or notifications to users. It is often used for warnings, errors, or success messages, and typically includes styles like background colors, borders, and icons to attract attention.ApproachBasic Structure: Use divs 2 min read How To Create A Box in HTML? In HTML, you can create a "box" using several techniques, such as using <div> elements and styling them with CSS. These boxes can be used for various purposes, such as creating layouts, buttons, or sections within a webpage.Method 1. Div Element with CSSThe <div> element is a block-level 3 min read How To Create A Dropup Menu Using CSS? A Dropup menu is a type of menu in web design that expands upwards from its trigger element instead of the traditional dropdown direction. Dropup menus are often used in contexts such as navigation bars, form selections, and interactive elements.Below are the approaches used for creating the dropup 6 min read How to create a dialog box or window in HTML ? In this article, we will create a dialog box or window using the <dialog> tag in the document. This tag is used to create popup dialog and models on a web page. This tag is new in HTML5. Syntax: <dialog open> Contents... </dialog> Example 1: html <!DOCTYPE html> <html> 1 min read How to create a Split Button Dropdown using CSS ? In this article, we will learn how to design a split button dropdown using CSS. Split buttons combine a main button with a dropdown, useful for adding interactive features to your website. This guide helps you improve your web design skills by showing you how to make a split button in easy steps. Ta 4 min read How To Create a Popup Chat Window With CSS? One of the many ways to assist your users actively is by adding a popup chat window on your website. This tutorial will walk you through the process of building a basic but useful popup chat box with HTML, CSS, and JavaScript.Approach:Design the layout with the "Open Chat," header, message input, an 3 min read How to Create Callout Messages using CSS? Callout messages are used to highlight important information, tips, warnings, or notes in a visually distinctive way. They help in drawing attention to specific parts of a document or webpage. We will explore how to create various types of callout messages using CSS.Preview ImagePreviewApproachFirst 3 min read Create a Contact Form using HTML CSS & JavaScript A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission 3 min read Like