Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create popups with CSS and JavaScript?
A popup is a modal window that appears on top of the main content when triggered by user interaction. Creating popups with CSS and JavaScript involves styling the popup elements and adding interactive functionality to show and hide the modal.
Syntax
.popup {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
Set a Button to Open the Popup
First, create a button that will be clicked by the user to open the popup −
<button class="openPopUp">Open Popup</button>
Set the Container for the Popup
A div is set for the popup. Within that, a child container is created for the popup content. The close symbol is added using the × HTML character code −
<div class="popUp">
<div class="popupContent">
<span class="close">×</span>
<p>Sample text inside popup</p>
</div>
</div>
Position the Popup
To position the popup, use the position property set to fixed. The display property is set to none because the popup will be visible only when the button is clicked −
.popUp {
text-align: center;
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
Style the Popup Content
Within the popup, the message area is styled with a background and border −
.popupContent {
font-size: 20px;
font-weight: bold;
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
Style the Close Button
The close button is positioned to the right using the float property and styled for visibility −
.close {
color: rgb(255, 65, 65);
float: right;
font-size: 40px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #ff1010;
cursor: pointer;
}
Complete Example
Here's a complete example showing how to create an interactive popup with CSS and JavaScript −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
padding: 20px;
}
.openPopUp {
background-color: #4CAF50;
color: white;
padding: 15px 32px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.popUp {
text-align: center;
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.popupContent {
font-size: 20px;
font-weight: bold;
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 500px;
border-radius: 10px;
}
.close {
color: rgb(255, 65, 65);
float: right;
font-size: 40px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #ff1010;
cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS and JavaScript Popup Example</h2>
<button class="openPopUp">Open Popup</button>
<p>Click the button above to open the popup modal.</p>
<div class="popUp">
<div class="popupContent">
<span class="close">×</span>
<h3>Welcome to the Popup!</h3>
<p>This is a sample popup created with CSS and JavaScript. You can close it by clicking the X button or clicking outside the popup.</p>
</div>
</div>
<script>
var popUp = document.querySelector(".popUp");
var btn = document.querySelector(".openPopUp");
var span = document.querySelector(".close");
btn.addEventListener("click", () => {
popUp.style.display = "block";
});
span.addEventListener("click", () => {
popUp.style.display = "none";
});
window.onclick = function(event) {
if (event.target == popUp) {
popUp.style.display = "none";
}
};
</script>
</body>
</html>
A green "Open Popup" button appears on the page. When clicked, a modal popup with a semi-transparent dark background overlay appears, containing a white content box with a close button (×) in the top-right corner. The popup can be closed by clicking the X or clicking outside the content area.
Conclusion
Creating popups with CSS and JavaScript involves positioning elements with fixed positioning, controlling visibility with display properties, and adding event listeners for interactive functionality. The combination of CSS styling and JavaScript event handling creates a smooth user experience.
658 Views
