HTML Question

How to make an iframe opening with a button in a popup?

I have an iframe and I want to be opened using a button in a popup.

EDIT:
I definitely want: when you click on an image, to show a video (iframe) in a popup with an x button on top right.

The iframe:

<iframe src="//content.jwplatform.com/players/4GWinBap-ilaHck0R.html" width="480" height="270" frameborder="0" scrolling="auto" allowfullscreen></iframe>

Answer

This should work

 <iframe id="iframeid"  style="display:none"></iframe>
<button id="openIframe">OPEN</button>
<script>
  var b = document.getElementById('openIframe');
  var i = document.getElementById('iframeid');

  b.addEventListener("click",function(){
    i.src = "http://test.com"
    i.style.display = "block";

  })
</script>

but if you want an external window you can use

<a target="_blank" href="src_of_iframe">OPEN IN A NEW WINDOW</a>

this is for the popup

<a href="javascript:window.open('http://www.google.com','mywindowtitle','width=500,height=150')">open window</a>

this is for a simple modal

   <div id="modal" style="left:50%;transform:translateX(-50%) translateY(-50%);top:50%;position:absolute;width:200px;background:darkgrey;display:none;padding:1em;margin:auto;">
  <button id="closebtn">Close</button>
  <iframe id="iframeid"  style="width:100%;height:100%"></iframe>
</div>

<button id="openIframe" href>OPEN</button>
<script>
  var m = document.getElementById('modal');
  var b = document.getElementById('openIframe');
  var i = document.getElementById('iframeid');
  var x = document.getElementById('closebtn');

  x.addEventListener("click",function(){
    m.style.display = "none"
  })
  b.addEventListener("click",function(){
    console.log('dsadas')
    i.src = "http://test.com"
    m.style.display = "block";

  })
</script>
Comments