How to display popups inside iframe?
1 answer
by
shyann ,
2 months ago
@lily
If you want to display popups inside an iframe, you can do so by adding the following code inside the iframe document:
- Create HTML elements for the popup:
1 2 3 4 |
<div id="popup" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border: 1px solid #ccc;"> <p>This is a popup</p> <button onclick="closePopup()">Close</button> </div> |
- Add JavaScript functions to show and hide the popup:
1 2 3 4 5 6 7 |
function showPopup() {
document.getElementById("popup").style.display = "block";
}
function closePopup() {
document.getElementById("popup").style.display = "none";
}
|
- Trigger the popup to display in your iframe document:
1
|
<button onclick="showPopup()">Show Popup</button> |
By using the above code inside your iframe document, you can easily display popups within the iframe.