点击显示弹层，点击别处隐藏弹出

蓝色看到坛友在问这个问题就着手写了一个，期间看到一个兄弟使用了tabindex=”-1″让我想起了以前确实用这个解决了很多的问题，比如点击按钮定位到某个位置，以前可能说添加一个锚点，现在使用tabindex就可以。多余的话就不多说了，还是说下咱们今天要说的话题，这个问题的难点就在于如何实现点击其他的地方可以隐藏弹出层上。如果你直接使用$(“body”).click()的话就会有问题，解决这个问题的关键就在于target和srcElement，你可以先查查这两个一个是标准的一个是ie的，ie9现在也支持target了。下面给出例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> * { padding:0; margin:0; } #click { display:inline-block; padding:8px 16px; background:#ccc; border-radius:4px; color:#fc5718; text-decoration:none; } #box { position:relative; margin:50px; } #pop { display:none; position:absolute; left:200px; top:40px; width:120px; height:120px; text-align:center; line-height:120px; border:2px solid #ccc; background:#eee; } </style> <script type="text/javascript"> window.onload = function () { var oBox = document.getElementById("box"), obj = document.getElementById("pop"), oBtn = document.getElementById("click"); oBtn.onclick = function () { obj.style.display = "block"; } document.onclick = function (event) { // var e = event || window.event; //兼容ie和非ie的event var aim = e.srcElement || e.target; //兼容ie和非ie的事件源 // if (aim != oBtn && aim != obj) { obj.style.display = "none"; } } } </script> </head> <body> <div id="box"> <a href="javascript:;" id="click" >点击弹出</a> <div id="pop"> 弹出层内容呢 </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

下面给出一个使用了tabindex的方法，这个方法也有个问题，那就是当你点击按钮的时候先是显示，再点击的话应该是隐藏，但是这个click会和blur事件冲突，我解决的方案是使用了setTimeout来延迟了下这样就ok了，好了说这么多可能不是很明白毕竟是空说吗，下面给出代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> * { padding:0; margin:0; } #click { display:inline-block; padding:8px 16px; background:#ccc; border-radius:4px; color:#fc5718; text-decoration:none; } #box { position:relative; margin:50px; } #pop { display:none; position:absolute; left:200px; top:40px; width:120px; height:120px; text-align:center; line-height:120px; border:2px solid #ccc; background:#eee; } </style> <script type="text/javascript"> window.onload = function () { var oBox = document.getElementById("box"), obj = document.getElementById("pop"), oBtn = document.getElementById("click"); //点击事件判断显示隐藏 oBtn.onclick=function(){ obj.setAttribute("tabindex","-1");//这个是重点，决定着下面的onblur事件 if(obj.style.display!=="block"){ obj.style.display="block"; obj.focus(); }else{ obj.style.display="none"; obj.blur(); } } //实现点击非 obj.onblur=function(){ setTimeout(function(){ obj.style.display="none"; },200); } } </script> </head> <body> <div id="box"> <a href="javascript:;" id="click" >点击弹出</a> <div id="pop"> 弹出层内容呢 </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

标签: 点击显示弹层，点击别处隐藏弹出

发表于 jquery

0 comments 0 people listening

Comment help
Get Livefyre

Sort: Newest | Oldest

点击显示弹层，点击别处隐藏弹出

站内搜索

热门文章

页面

最新评论

好站推荐

工具

常逛

标签

存档

功能