如何在失去焦点时隐藏div？

基本上我试图实现登录，如新的twitter的。当你点击登录时，会弹出一个对话框。现在，当我点击div（div失去焦点）以外的任何地方时，div应该消失。如何在失去焦点时隐藏div？

我已经试过代码如下

$("body").click(function(evt) { 

      if (evt.target.id !== 'loginDialog') { 
       $("#loginDialog").hide(); 
      } 
     });

有这个麻烦How to blur the div element?

提到的技术是target.id将不等于甚至一个LoginDialog如果我点击某处withing说的LoginDialog在子div内。

所以上述是一个很好的方向，但解决方案是不完整的。

达到此目的的最佳方法是什么？

来源

2011-03-02 shashi

我有一种预感，一些事件冒泡处理代码将必需的，但从来没有这样做之前 – shashi 2011-03-02 09:14:17

如果外移动你的鼠标是不够的，你想，只有当用户点击它外面消失了，这里有一个片段，它可以帮助你。

$('body').click(function(evt) { 
    if($(evt.target).parents('#loginDialog').length==0) { 
     $('#loginDialog').hide(); 
    } 
});

来源

2011-03-02 09:23:04 pestaa

好的，方法是对的，但我做了一些调整。而不是$（this）我使用$（evt.target），因为$（this）总是被body引用，所以它的父类是html。此外，我使用的比较是.length！= 0，并将logindialog隐藏在else条件中。 – shashi 2011-03-02 10:21:20

你是对的，我没有考虑过。抱歉。我为后续访问者修复它。 – pestaa 2011-03-02 19:26:57

更好在各种示例

[UPDATE] ::对不起笨假想代码使用jquery的fancybox插件的iframe http://fancybox.net/。检查工作代码

<script type="text/javascript"> 
    $(function(){ 
     $(document).click(
      function (e){ 
       var blur = $('#blur'); 
       var position = $(blur).position(); 
       var height = $(blur).height(); 
       var width = $(blur).width(); 

       if((e.clientX > position.left && e.clientX < position.left + width) && 
        (e.clientY > position.top && e.clientY < position.left + height) 
       ){ 
        alert(e.clientX+' '+e.clientY); 

       } 
       else{  
        /*Hide the div*/      
         $('#blur').hide(); 
        /*Hide the div*/ 

       } 


      } 
     ) 
    }) 
</script> 
<div id="blur">Blur me</div>

来源

2011-03-02 09:15:03

不解雇div的模糊事件所以这不起作用。 – shashi 2011-03-02 10:22:07

@sassyboy检查更新的代码 – 2011-03-02 10:23:19

这也是一个好方法，但是pestaa的代码只是几行代码，所以我让它成为答案。尽管我已经提出了你的答案！ – shashi 2011-03-02 13:06:30

不是一个好practce但可能工作...

$('body').click(function(){ 
    $('#loginDialog').hide();  

}); 
$('#loginDialog').click(function(evt){ 
    evt.stopPropagation(); 
});

来源

2011-03-02 09:31:57

如何在失去焦点时隐藏div？

回答

相关问题