我正在创建一个 JavaScript 弹出窗口。代码如下。
HTML:
<div id="ac-wrapper" style='display:none'>
<div id="popup">
<center>
<h2>Popup Content Here</h2>
<input type="submit" name="submit" value="Submit" onClick="PopUp('hide')" />
</center>
</div>
</div>
CSS:
#ac-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("images/pop-bg.png") repeat top left transparent;
z-index: 1001;
}
#popup {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
height: 361px;
margin: 5% auto;
position: relative;
width: 597px;
}
脚本:
function PopUp(hideOrshow) {
if (hideOrshow == 'hide') document.getElementById('ac-wrapper').style.display = "none";
else document.getElementById('ac-wrapper').removeAttribute('style');
}
window.onload = function () {
setTimeout(function () {
PopUp('show');
}, 0);
}
jsFiddle 链接:
问题:
我需要在外部点击时关闭此弹出窗口。我可以通过点击里面的提交来关闭它。
我尝试了什么让它在 onClick 之外关闭?
脚本:
function hideNow()
{
document.getElementById('ac-wrapper').style.display = 'none';
}
HTML 代码:
<div id="ac-wrapper" style='display:none' onClick="hideNow()">
到底发生了什么?
它会在外部单击时关闭弹出窗口,但也会在我尝试访问内部内容时关闭弹出窗口。
我对这个问题很困惑。有人可以指导我吗? 谢谢。
最佳答案
您需要添加一些代码来检查您是否单击了包装器。像这样的事情会起作用:
<div id="ac-wrapper" style='display:none' onClick="hideNow(event)">
您需要将事件
添加到您的函数调用中。
在你的 JS 代码中:
function hideNow(e) {
if (e.target.id == 'ac-wrapper') {
document.getElementById('ac-wrapper').style.display = 'none';
}
}
在函数中,您检查 event.target
是什么(您实际单击的元素)。如果 id
与“ac-wrapper”匹配,您就知道您点击了正确的元素。
参见Fiddle
关于javaScript div 弹出窗口不会在外部点击时隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23736692/