在模式弹出窗口中打开外部网站
Opening an external website in a modal popup
我知道 <a href="http://www.example.com" target="_blank">Click here</a>
在新选项卡中打开 link (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>
打开它 。
但是如何在模式弹出窗口中打开外部页面(居中在屏幕上,原始页面的其余部分"darkened")?
有什么好的方法吗?
我尝试了以下代码,但它似乎不起作用(单击:弹出窗口打开,重新单击,它关闭,重新单击 link:它不再打开。iframe 也没有't load).
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 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">
的parent,这样点击<div id="page">
就不会触发<a id="popup">
.
以下是两种解决方案:
I prefer the Solution2, it is better decoupling than
Solution1, every component foucs on its own jobs.
解决方案 1: 如果弹出窗口已经完成初始化,则添加 isInit
作为指示器。
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>
解决方案 2:使 <div id="page">
和 <a id="popup">
是表亲关系,而不是 parent 关系。
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>
根据 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>
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>
我知道 <a href="http://www.example.com" target="_blank">Click here</a>
在新选项卡中打开 link (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>
打开它
但是如何在模式弹出窗口中打开外部页面(居中在屏幕上,原始页面的其余部分"darkened")?
有什么好的方法吗?
我尝试了以下代码,但它似乎不起作用(单击:弹出窗口打开,重新单击,它关闭,重新单击 link:它不再打开。iframe 也没有't load).
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 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">
的parent,这样点击<div id="page">
就不会触发<a id="popup">
.
以下是两种解决方案:
I prefer the Solution2, it is better decoupling than Solution1, every component foucs on its own jobs.
解决方案 1: 如果弹出窗口已经完成初始化,则添加 isInit
作为指示器。
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>
解决方案 2:使 <div id="page">
和 <a id="popup">
是表亲关系,而不是 parent 关系。
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>
根据 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>
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>