javascript - 在模式弹出窗口中打开外部网站

Question

我知道 <a href="http://www.example.com" target="_blank">Click here</a> 在新标签页中打开链接(Chrome 和 Firefox 中的默认行为)

<a href="http://www.example.com" onclick="window.open('http://www.example.com', 
        'newwindow', 'width=700,height=500'); return false;">Click here</a>

打开它 in a new window .

但是如何在模态弹出窗口中打开外部页面(以屏幕为中心，原始页面的其余部分“变暗”)？

有什么好的方法吗？

我尝试了以下代码，但它似乎不起作用(单击:弹出窗口打开，重新单击，它关闭，重新单击链接:它不再打开。iframe 也没有加载)。

document.getElementById("a").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popup").style.display = "block";
  document.getElementById('iframe').src = "http://example.com";
  document.getElementById('page').className = "darken";
  setTimeout(function() { 
    document.getElementById('page').onclick = function() {
      document.getElementById("popup").style.display = "none";
      document.getElementById('page').className = "";
    }
  }, 100);
  return false;
}

#popup { 
  display: none; 
  border: 1px black solid;
  width: 400px; height: 200px; 
  top:20px; left:20px;
  background-color: white;
  z-index: 10;
  padding: 2em;
  position: fixed;
}

.darken { background: rgba(0, 0, 0, 0.7); }

#iframe { border: 0; }

html, body, #page { height: 100%; }

<div id="page">
  <a href="" id="a">Click me</a><br>
  Hello<br>
  Hello<br>

  <div id="popup"> 
  External website:
  <iframe id="iframe"></iframe>
  </div>

</div>

Answer 1

基于 Sphinx 的出色回答，我将使用以下方法创建一个模态弹出窗口，在 iframe 中显示外部网站，其余部分的背景为深色弹出窗口打开时的页面:

document.getElementById("link").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;
}

window.onkeydown = function(e) {
    if (e.keyCode == 27) {
      document.getElementById("popup").style.display = "none";
      document.getElementById("popupdarkbg").style.display = "none";
      e.preventDefault();
      return;
    }
}

#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#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; }

<div id="main">
<a href="" id="link">Click me</a><br>
</div>

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