JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
  <a href="" id="link1">Click me (website, modal popup)</a><br>
  <a href="" id="link2">Click me (jpg image, modal popup)</a><br>
  <a href="" id="link3">Click me (jpg image, new window)</a><br>
</div>

<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>

CSS

#popup {
  display: none;
  position: fixed;
  top: 12%;
  left: 15%;
  width: 70%;
  height: 70%;
  background-color: white;
  z-index: 10;
    background-image: url('http://placebeyonce.com/450-300');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#popup iframe {
  width: 100%;
  height: 100%;
  border: 0;

}

#popupdarkbg {
  position: fixed;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, .75);
  display: none;
}

JavaScript

document.getElementById("link1").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popupdarkbg").style.display = "block";
  document.getElementById("popup").style.display = "block";
  document.getElementById('popupiframe').src = "http://example.com";
  document.getElementById('popupdarkbg').onclick = function() {
    document.getElementById("popup").style.display = "none";
    document.getElementById("popupdarkbg").style.display = "none";
  };
  return false;
}

document.getElementById("link2").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popupdarkbg").style.display = "block";
  document.getElementById("popup").style.display = "block";
  document.getElemenbtById("popup").sty
  document.getElementById('popupiframe').src = "https://i.imgur.com/pz2iPBW.jpg";
  document.getElementById('popupdarkbg').onclick = function() {
    document.getElementById("popup").style.display = "none";
    document.getElementById("popupdarkbg").style.display = "none";
  };
  return false;
}

document.getElementById("link3").onclick = function(e) {
  window.open('https://i.imgur.com/pz2iPBW.jpg', 'newwindow', 'width=700,height=500');
  e.preventDefault();
  return false;
}