Introduction:
HTML Pop-up Windows are dynamic components that overlay web pages, commonly known as pop-ups or modal windows. They serve various purposes such as notifying users, displaying additional content, or collecting user feedback.
A popup, also known as a dialogue box, is a modal window that pops up on the screen to notify, warn, or request information from the user. It is advisable to avoid using popup windows as they can hinder access to other sections of the program until the popup window is closed.
Method 1:
In this tutorial, we will showcase the creation of a popup container using HTML and CSS. Essential HTML elements such as header, paragraph, button, and link will be employed. The demonstration involves generating a button that triggers the appearance of a popup container when clicked. By utilizing the href attribute to define a reference to the "popup-box" URL, we associate the anchor element with the popup container styled with the "modal" class.
Code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible"
content = "IE=edge">
<meta name = "viewport"
content = "width=device-width,
initial-scale=1.0">
<style>
.box {
background-color: #FA6F72;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
p {
font-size: 17px;
align-items: center;
}
.box a {
display: inline-block;
background-color: #fff;
padding: 20px;
border-radius: 5px;
}
.modal {
align-items: center;
display: flex;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(254, 126, 126, 0.7);
transition: all 0.4s;
visibility: hidden;
opacity: 0;
}
.content {
position: absolute;
background: yellow;
width: 400px;
padding: 1em 2em;
border-radius: 4px;
}
.modal:target {
visibility: visible;
opacity: 1;
}
.box-close {
position: absolute;
top: 0;
right: 15px;
color: black;
text-decoration: none;
font-size: 30px;
}
</style>
</head>
<body>
<div class = "box">
<a href = "#popup-box">
Click to Open Popup Box!
</a>
</div>
<div id = "popup-box" class = "modal">
<div class = "content">
<h1 style = "color: green;">
Hello Coders!
</h1>
<b>
<p>Code Everyday!</p>
</b>
<a href = "#" class = "box-close">
x
</a>
</div>
</div>
</body>
</html>
Output:
Upon selecting the button located above, the subsequent screen will be displayed, presenting a dialog box as the output.
Method 2:
By employing a brief JavaScript script, we managed to generate an interactive popup box in this instance through triggering the popup window's automatic display on the page. Initially, an automatic popup box was crafted utilizing HTML and CSS, leveraging various markup elements such as button, heading, anchor, and div. The styling was accomplished through the application of internal CSS classes. The addEventListener method in JavaScript was utilized to detect the click event for opening and closing the popup box named "myPopup".
Putting the popup box into practice:
Code:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible"
content = "IE=edge">
<meta name = "viewport"
content = "width=device-width,
initial-scale=1.0">
<style>
.popup {
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: #576490;
display: none;
}
.popup-content {
background-color: #F5E0D0;
margin: 10% auto;
padding: 20px;
border: 1px solid #888888;
width: 30%;
font-weight: bolder;
}
.popup-content button {
display: block;
margin: 0 auto;
}
.show {
display: block;
}
h1 {
color: black;
}
</style>
</head>
<body>
<h1>Happy Coding</h1>
<h3>Using HTML and CSS to Create a Popup Box</h3>
<button id = "myButton">
Click Here!
</button>
<div id = "myPopup" class = "popup">
<div class = "popup-content">
<h1 style = "color:green;">
Happy Coding!
</h1>
<p>Popup box is Created!</p>
<button id = "closePopup">
Close
</button>
</div>
</div>
<script>
myButton.addEventListener("click", function () {
myPopup.classList.add("show");
});
closePopup.addEventListener("click", function () {
myPopup.classList.remove("show");
});
window.addEventListener("click", function (event) {
if (event.target == myPopup) {
myPopup.classList.remove("show");
}
});
</script>
</body>
</html>
Output:
Upon selecting the button mentioned above, the subsequent screen will be displayed, presenting a dialog box as the output.
Method 3:
An alternative approach demonstrates how to create a Modal Window by combining HTML, CSS, and JavaScript. This Modal Window includes animated effects to smoothly display when the button is activated.
Code:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<style>
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #D98B7A;
color: #F8F3F1;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
</style>
</head>
<body style = "text-align:center">
<h2>Popup Box Creation</h2>
<div class = "popup" onclick = "myFunction()">Click Here to toggle the popup Box!
<span class = "popuptext" id = "myPopup">A Small Popup Box Created!</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
</body>
</html>
Output:
Upon clicking the button labeled "Click Here to toggle the popup Box!" located above, a basic popup will appear, resembling the image displayed below.
Below are various techniques that can be utilized to generate a modal dialog using HTML.
Conclusion:
Enhancing website functionality and user experience can be achieved through the utilization of HTML page popup windows, versatile tools that serve multiple purposes. Creating effective and user-friendly popups for your web projects involves understanding the basic structure, customization options, and useful tips. To identify the design and functionality that align best with your specific needs, it is recommended to explore various configurations.