How to open a link in a pop up iframe window?

Member

by dedrick , in category: Javascript , 3 months ago

How to open a link in a pop up iframe window?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by aubrey , 3 months ago

@dedrick 

To open a link in a pop-up iframe window, you can use the following HTML code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<style>
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #ccc;
  padding: 10px;
  background: #fff;
  z-index: 9999;
}
</style>
</head>
<body>

<a href="#" id="open-popup">Open Popup</a>

<div class="popup" id="popup">
  <iframe src="https://example.com" width="400" height="300"></iframe>
  <button id="close-popup">Close</button>
</div>

<script>
document.getElementById('open-popup').onclick = function() {
  document.getElementById('popup').style.display = "block";
}

document.getElementById('close-popup').onclick = function() {
  document.getElementById('popup').style.display = "none";
}
</script>

</body>
</html>


In this code snippet, when the user clicks on the "Open Popup" link, a pop-up iframe window will appear with the content from the specified URL. The pop-up window can be closed by clicking the "Close" button. You can customize the styling and functionality of the pop-up window as needed.