Question

基本上我正在尝试实现新Twitter的登录。当您单击登录时，会弹出包含字段的div。现在，当我点击div之外的任何地方（div失去焦点）时，div应该消失。

中提到的技术

代码如下

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

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

麻烦就是target.id不会等于loginDialog，即使我点击某个地方，并且在子div中使用了loginDialog。

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

实现这一目标的最佳方法是什么？

Answer 1

如果将鼠标移到外面是不够的，并且只有当用户点击它外面时你想让它消失，这里有一个可能对你有帮助的片段。

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

Answer 2

最好在各种示例中使用iframe http://fancybox.net/的jquery fancybox插件

[更新] ::抱歉愚蠢的假设代码。检查工作代码

<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>

Answer 3

这不是一个好的做法，但可能有用......

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

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

当它失去焦点时如何隐藏div？

3 个答案: