How to create a popup iframe in HTML?
January 27, 2023Hi Friends 👋,
Welcome To aGuideHub! ❤️
To create a popup iframe in HTML, first, we have to create a popup using the below popup css and then add iframe within the popup to make a popup iframe in HTML.
Today, I am going to show you. how to create a popup iframe in HTML with code example.
Table of contents
- Includes bootstrap view
- Define its css class
- Example of popup iframe in html
This article will guide you to create a popup iframe in html with an example.
Step 1: Includes bootstrap view
To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Step 2: Define its css class
To create a popup in HTML, we will need the below CCS it creates a normal div to popup div.
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
height: 600px;
background-color: white;
z-index: 1;
}
#popup-iframe {
width: 100%;
height: 100%;
}Example of popup iframe in html
In this example, we will do the following things
- Create a button with javascript that helps us to open of popup iframe in html
- Add a popup CSS effect to make the div behave like a pop-up
- Add iframe with your iframe URL in the popup div.
Let’s look at the following example to understand how it works:
<!DOCTYPE html>
<html>
<style>
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 90vh;
background-color: white;
z-index: 1;
}
#popup-iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<h1>The iframe element</h1>
<button id="popup-button">Open Popup</button>
<div id="overlay"></div>
<div id="popup">
<iframe src="https://aguidehub.com" id="popup-iframe"></iframe>
</div>
<script>
const button = document.getElementById("popup-button");
const overlay = document.getElementById("overlay");
const popup = document.getElementById("popup");
button.addEventListener("click", function () {
overlay.style.display = "block";
popup.style.display = "block";
});
overlay.addEventListener("click", function () {
overlay.style.display = "none";
popup.style.display = "none";
});
</script>
</body>
</html>Check the output of the above code example.
Try the below codesandbox link to customize the above example as per your requirement.
All the best 👍