How to Open a Popup on Click using JavaScript ?
Last Updated :
20 Aug, 2024
Opening a Pop-up when the click action is performed is the user-interactive technique. We can use this functionality in messages, or forms to show some error or alert messages before the user moves to the next action.
In this approach, we are using the display property in JavaScript to toggle the visibility of the overlay and popup dialog elements. The popupFn() and closeFn() functions dynamically set the display property to 'block' for opening and 'none' for closing, performing a popup effect on button click.
Syntax:
document.getElementById("element").
style.display = "none";Example: In this example we displays a popup dialog and overlay using the display property. Clicking "Open Popup" shows the dialog and overlay, while "Close" hides them. The overlay dims the background for better focus.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using display property</title>
<style>
#popupDialog {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
z-index: 1000;
}
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Using display property</h3>
<button onclick="popupFn()">
Open Popup
</button>
<div id="overlay"></div>
<div id="popupDialog">
<p>Welcome to GeeksforGeeks</p>
<button onclick="closeFn()">
Close
</button>
</div>
<script>
function popupFn() {
document.getElementById(
"overlay"
).style.display = "block";
document.getElementById(
"popupDialog"
).style.display = "block";
}
function closeFn() {
document.getElementById(
"overlay"
).style.display = "none";
document.getElementById(
"popupDialog"
).style.display = "none";
}
</script>
</body>
</html>
Output:
In this approach, we will use the classList property with toggle() method in JavaScript to toggle the visibility of the overlay and popup dialog elements. The openFn() function dynamically adds or removes the 'hidden' class, while adjusting the opacity for a smooth transition, which results in a popup on button click.
Syntax:
const elementClasses =
elementNodeReference.classList;Example: In this example we uses classList to toggle the visibility of a popup and overlay. Clicking "Open Popup" fades in the dialog, and "Close" fades it out, using opacity and hidden class.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using classList Property</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#popupContainer {
position: relative;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
#popupDialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
h1 {
color: #4caf50;
margin-bottom: 20px;
}
p {
color: #333;
margin-bottom: 15px;
}
button {
padding: 10px 20px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="popupContainer">
<h1>GeeksforGeeks</h1>
<h3>Using classList Property</h3>
<button onclick="openFn()">
Open Popup
</button>
<div id="overlay" class="hidden"></div>
<div id="popupDialog" class="hidden">
<p>
Welcome to a more stylish
GeeksforGeeks experience!
</p>
<button onclick="openFn()">
Close
</button>
</div>
</div>
<script>
function openFn() {
const over =
document.getElementById(
"overlay"
);
const popDialog =
document.getElementById(
"popupDialog"
);
over.classList.toggle("hidden");
popDialog.classList.toggle(
"hidden"
);
popDialog.style.opacity =
popDialog.style.opacity ===
"1"
? "0"
: "1";
}
</script>
</body>
</html>
Output:
In this approach we are using the visibility property in CSS to toggle the visibility of a popup dialog. When the "Open Popup" button is clicked, the openPop() function is called. This function checks the current visibility state of the popup and toggles it between visible and hidden.
Syntax:
const elementClasses =
document.getElementById('elementClasses');
elementClasses.style.visibility =
(elementClasses.style.visibility === 'visible') ? 'hidden' : 'visible';Example: In this example we uses the visibility property to toggle a popup dialog's visibility. The Open Popup button shows the dialog, while the "Close" button hides it by toggling visibility between visible and hidden.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using visibility property</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#popupDialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
z-index: 1000;
visibility: hidden;
}
h1 {
color: #4caf50;
margin-bottom: 20px;
}
p {
color: #333;
margin-bottom: 15px;
}
button {
padding: 10px 20px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div id="popupContainer">
<h1>GeeksforGeeks</h1>
<h3>Using visibility Property</h3>
<button onclick="openPop()">
Open Popup
</button>
<div id="popupDialog">
<p>Welcome to GeeksforGeeks!</p>
<button onclick="openPop()">
Close
</button>
</div>
</div>
<script>
function openPop() {
const popDialog =
document.getElementById(
"popupDialog"
);
popDialog.style.visibility =
popDialog.style.visibility ===
"visible"
? "hidden"
: "visible";
}
</script>
</body>
</html>
Output:
Similar Reads
How to Open a Popup on Hover using JavaScript ?
In JavaScript, to perform the functionality of opening the popup on hover, we can dynamically manipulate the DOM by responding to the mouse events. The below approaches can be used to accomplish this task. Table of Content Using mouseover and mouseout eventsUsing onmouseenter and onmouseleave events
3 min read
How to Open a Popup on Hover using JavaScript ?
We will be learning about the ways to open a pop-up when the cursor hovers over the HTML Element. Hover is a useful UI interaction that helps in getting more information about a specific HTML element. Pop Up can be shown as the additional data to make things much more understandable. It responds to
4 min read
How to Open a Link Without Clicking on it using JavaScript?
To open a link without clicking on it we can use the onmouseover method of JavaScript. The link will open when the mouse moves over the text. It returns a newly created window, or NULL if the call gets failed. Syntax:window.open( URL, name, Specs )Note: Allow Pop-up of Web Browser. Example 1: URL is
2 min read
How to Load DIV Content on Click Only using JavaScript?
To load content into a div when a button or any other element is clicked using JavaScript, you can follow these simple steps. You can either load static content or fetch data from an external source using AJAX (for more advanced usage). Below is a basic example to load content into a div when a butt
2 min read
How to Toggle Popup using JavaScript ?
A popup is a graphical user interface element that appears on top of the current page, often used for notifications, alerts, or additional information. These are the following approaches to toggle a popup using JavaScript: Table of Content Using visibility propertyUsing ClassListUsing visibility pro
3 min read
How to print a web page using JavaScript ?
Javascript is the world most popular lightweight, cross-platform, interpreted compiled programming language, along with a scripting language for web. It facilitates the dynamic functionality that helps to make the interactive website. As all the Morden browsers use the Javascript & is a client-s
2 min read
How to Open URL in New Tab using JavaScript?
HTML anchor tag is used to open URLs in a new tab using the target="_blank" attribute. In JavaScript, we have an inbuilt method window.open() which is used to open a new browser window or new tab depending on the browser settings. Using window.open() MethodTo open a new tab, we have to use _blank in
2 min read
How to create Popup Box using HTML, CSS and JavaScript ?
Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility. ApproachCreate the Popup structure using HTML tags, Some tags
3 min read
How to Download PDF File on Button Click using JavaScript ?
Sometimes, a web page may contain PDF files that can be downloaded by the users for further use. Allowing users to download the PDF files can be accomplished using JavaScript. The below methods can be used to accomplish this task. Table of Content Using html2pdf.js libraryUsing pdfmake LibraryUsing
5 min read
How to add a tooltip to a div using JavaScript?
Adding tooltip to div element displays a pop-up, whenever the mouse hovers over div. Syntax: < div title = "" > </div> <script> $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); }); </script> Tooltip Methods: .tooltip("show"): It is us
2 min read