Hide div onclick outside
在我的网站上,当用户点击表单时,弹出了一个div。我正在使用onclick事件处理程序来显示div。当用户点击除div以外的任何位置时,我想让div隐藏自己。我不能使用onblur ...因为它不适用于div。有人可以提出替代方案吗?Hide div onclick outside
谢谢。
这里是我的代码如下所示: 的Javascript:
function hideDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('mydiv').style.visibility = 'hidden';
}
else {
if (document.layers) { // Netscape 4
document.mydiv.visibility = 'hidden';
}
else { // IE 4
document.all.mydiv.style.visibility = 'hidden';
}
}
}
function showDiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('mydiv').style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.mydiv.visibility = 'visible';
}
else { // IE 4
document.all.mydiv.style.visibility = 'visible';
}
}
}
我处理这种事情在过去的方式是建立在div后面的透明层(使用背景图片是完全透明的)其中有CSS沿线的地方:
div#overlay{
position: fixed;
width: 100%;
height: 100%;
background-image:url('transparent.gif');
z-index: 1;
}
这div当然只有“可见”,当顶部的div是可见的。 ,然后附加一个onclick事件处理程序以再次隐藏。
确保您的“弹出格”具有至少2的z-index
刚刚发现使用的onmouseover /事件处理函数中一个简单的解决方案。
只有当变量为真时,才会调用hideDiv()函数。
var mouse_out;
mydiv.onmouseover = function(){ mouse_out = false }; // mouse is over div
mydiv.onmouseout = function(){ mouse_out = true }; // mouse outside
document.onclick = function(){
if(mouse_out)
hideDiv(), // hides mydiv
document.onclick = null; // disables next clicks on document
};
它适用于每一个我测试浏览器,也是IE 5.
(IE4和NS4我不知道)
迄今为止我见过的最好的方法。大多数情况下需要在发生动态事件时进行杂耍 - 这会跟踪div的状态并根据该状态采取行动,而不是其他行为。我使用一个轻微的变体;我通过添加和删除类而不是变量来跟踪div的状态。这使得更容易跟踪多个div的状态,并更容易处理改变状态的复杂逻辑。但核心模式是一样的。 – 2015-04-16 15:44:33
+1,这通常被称为一个'overlay'据我所知:) – Damb 2011-04-22 21:57:29
@ Dampe是的,谢谢。为了清晰起见,更改了代码。 – CookieMonster 2011-04-22 22:00:28
我不确定,但不会“背景:透明;”够用(而是使用透明图像)?我当然没有测试过,我只是好奇而已。 – Damb 2011-04-22 22:06:45