Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create popups with CSS and JavaScript?
A popup appears on the click of a button. Add any key message in it. To close the popup, set a cross symbol on top-right. However, the popups generally close when the mouse cursor is placed somewhere else on the web page.
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. Withing that, a child container is created for the popup content. Within that, set the close symbol 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 and set it to fixed. The display property is set to none because the popup will be visible only when the button is clicked, else it remains hidden −
.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);
}
The popup content
Within the popup, the message area is set with width 80% −
Within the popup, the message area is set with width 80%:
.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 −
.close {
color: rgb(255, 65, 65);
float: right;
font-size: 40px;
font-weight: bold;
}
Hovering the close button
With that, on hover the cursor property is set to pointer to make it look clickable −
.close:hover,
.close:focus {
color: #ff1010;
cursor: pointer;
}
Example
To create popups with CSS and JavaScript, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
.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%;
}
.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>
<h1>Popup Example</h1>
<button class="openPopUp">Open Popup</button>
<h2>Click on the above button to open the popup</h2>
<div class="popUp">
<div class="popupContent">
<span class="close">×</span>
<p>Sample text inside 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>
361 Views
