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

Opening an external website in a modal popup

提问by Basj

I know that <a href="http://www.example.com" target="_blank">Click here</a>opens the link in a new tab(default behaviour in Chrome and Firefox) and that

我知道在新选项卡中<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>

opens it in a new window.

在新窗口中打开它。

But how to open an external page in a modal popup (centered on screen, rest of the original page "darkened")?

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

Is there a nice way to do it?

有什么好的方法吗？

I tried the following code, but it doesn't seem to be working (click: popup opens, reclick, it closes, reclick on link: it doesn't open anymore. Also the iframe doesn't load).

我尝试了以下代码，但它似乎不起作用（单击：弹出窗口打开，重新单击，它关闭，重新单击链接：它不再打开。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>

回答by Basj

Based on Sphinx's great answer, here is what I'll use to create a modal popupdisplaying an external website in a iframewith a dark background for the rest of the page when the popup is open:

根据 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>

回答by Sphinx

The root cause is 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 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。

The simple solution is add one parameter to control the state of the popup. if the popup is closed, do nothing in page.onclick.

简单的解决方案是添加一个参数来控制弹出窗口的状态。如果弹出窗口关闭，则在 page.onclick 中什么都不做。

To remove setTimeout, there are two solution:

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

1. added another parameter to control the state of the popup initialization.

2. Don't make <div id="page">is the parent of <a id="popup">, so <a id="popup">will not be triggered when clicked <div id="page">.

1. 添加了另一个参数来控制弹出窗口初始化的状态。

2. 不要 make<div id="page">是 的父级<a id="popup">，因此<a id="popup">单击 时不会触发<div id="page">。

Below are two solutions:

下面是两种解决方案：

I prefer the Solution2, it is better decoupling than Solution1, every component foucs on its own jobs.

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

Solution 1: added isInitas the indicator if the popup already finished initialization.

解决方案 1：isInit如果弹出窗口已完成初始化，则添加为指示器。

PS: In the comment, you mentioned close the popup only when click on <div id="page">, to implement this in solution1, I think you have to bind the event =mouseout, mouseenterto judge where the mouse clicks.

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

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>

Solution 2: make <div id="page">and <a id="popup">is cousin not parent relations.

解决方案 2： make<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>

回答by Ibrahim Ali Roblox

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>