在模式弹出窗口中打开外部网站答案

【问题标题】：Opening an external website in a modal popup在模式弹出窗口中打开外部网站
【发布时间】：2018-02-28 21:52:50
【问题描述】：

我知道<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>

【问题讨论】：

根本原因是page.onclick是第一次popup后注册，然后后面的'open popup'会连续触发a.onclick和page.onclick，导致popup被打开然后直接关闭。
@Sphinx 你能发布一个工作的sn-p吗？提前致谢。

标签： javascript html css iframe popup

【解决方案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>

【讨论】：

注意：SO 在代码 sn-ps 的iframe 中禁用外部网站加载（有充分的理由），所以不要忘记启用它以运行此代码 sn-p（顶部的小图标浏览器地址栏右侧）。

【解决方案2】：

根本原因是page.onclick is registered after popup window is open at the first time, then the following 'open popup' will trigger a.onclick and page.onclick in a row, that caused the popup window is open then is closed directly。

简单的解决方案是添加一个参数来控制弹出窗口的状态。如果弹出窗口关闭，则在 page.onclick 中不执行任何操作。

要移除setTimeout，有两种解决方案：

添加了另一个参数来控制弹出窗口初始化的状态。
不要让<div id="page">是<a id="popup">的父级，所以点击<div id="page">时不会触发<a id="popup">。

以下是两种解决方案：

我更喜欢Solution2，它比解耦更好 Solution1，每个组件都专注于自己的工作。

解决方案 1：添加 isInit 作为弹出窗口已完成初始化的指示符。

PS：在评论中，您提到仅在单击<div id="page">时关闭弹出窗口，要在解决方案1中实现此功能，我认为您必须绑定事件=mouseout，@987654329 @判断鼠标点击的位置。

document.getElementById("a").onclick = function(e) {
  e.preventDefault();
  var isInit = true; // indicates if the popup already been initialized.
  var isClosed = false; // indicates the state of the popup
  document.getElementById("popup").style.display = "block";
  document.getElementById('iframe').src = "http://example.com";
  document.getElementById('page').className = "darken";
  document.getElementById('page').onclick = function() {
    if(isInit){isInit=false;return;}
    if(isClosed){return;} //if the popup is closed, do nothing.
    document.getElementById("popup").style.display = "none";
    document.getElementById('page').className = "";
    isClosed=true;
  }
  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>

解决方案 2：使 <div id="page"> 和 <a id="popup"> 是表亲而不是父关系。

document.getElementById("popup").showpopup = function() {
  document.getElementById("popup").style.display = "block";
  document.getElementById('iframe').src = "http://example.com";
  document.getElementById('page').className = "darken";
  document.getElementById("page").style.display = "block";
}

document.getElementById("a").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popup").showpopup();
}

document.getElementById('page').onclick = function() {
  if(document.getElementById("popup").style.display == "block") {
    document.getElementById("popup").style.display = "none";
    document.getElementById("page").style.display = "none";
    document.getElementById('page').className = "";
  }
};

#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;
}

#page { 
  display: none; 
  width: 100%; height: 100%; 
  top:0px; left:0px;
  z-index: 9;
  padding: 2em;
  position: absolute;
}

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

#iframe { border: 0; }

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

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

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

【讨论】：

我放了setTimeout以避免第一次点击自动触发关闭，我们可以通过你的方法删除它吗？还需要单击 inside 弹出窗口不会关闭它：只有在弹出窗口外部单击才能关闭它，如何更改？
更新了答案，认为解决方案过于复杂...要删除setTimeout，我们可以简单地添加另一个参数来指示是否已经初始化。
@Basj，更新了答案，它为实现弹出模式提供了另一种思路。

【解决方案3】：

document.getElementById("a").onclick = function(e) {
  e.preventDefault();
  var isInit = true; // indicates if the popup already been initialized.
  var isClosed = false; // indicates the state of the popup
  document.getElementById("popup").style.display = "block";
  document.getElementById('iframe').src = "http://example.com";
  document.getElementById('page').className = "darken";
  document.getElementById('page').onclick = function() {
    if(isInit){isInit=false;return;}
    if(isClosed){return;} //if the popup is closed, do nothing.
    document.getElementById("popup").style.display = "none";
    document.getElementById('page').className = "";
    isClosed=true;
  }
  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"> height=“200”</iframe>
  </div>

</div>

【讨论】：