Question

我有一个叠加div，当我点击一个DOM元素时，它会淡入。当我点击页面上的任何地方（div本身除外）时，我希望能够关闭它，但它不起作用.. 这是我的代码：

    //Script for showing the DIV called overlay.
       <script>
        $(function() {
            $('#loginfooter').click(function(){
                $('#overlay').fadeIn(200,function(){
                    $('#box').animate({'top':'20px'},'slow');


                });
                return false;
            });
            $('#boxclose').click(function(){
                $('#box').animate({'top':'-800px'},500,function(){
                    $('#overlay').fadeOut('fast');
                });
            });


        });
    </script>

//Script for hiding the div after clicking anywhere..
    <script>
        $(document).ready(function(){
            $('#overlay').on('click',function(ev){
                var myID = ev.target.id;
                if(myID!=='overlay'){
                    $('#box').animate({'top':'-800px'},500,function(){
                        $('#overlay').fadeOut('fast');
                    });
                }
            });
        });


    </script>

Answer 1

只需替换它：

$('#overlay').on('click', function (ev) {

用这个

$(document).on('click', function (ev) {

再试一次....

实际上，当您点击overlay元素时，myID变量值始终为== 'overlay'。因此，它永远不会进入if语句。

Answer 2

DEMO 1

$(document).on('click',function(e){
    if(!$(e.target).closest('#overlay').length)
        $('#overlay').hide();
});

不使用任何委托事件的其他可能性：

DEMO 2

$('#overlay').on('blur', function (e) {
    $(this).hide();
});

即使你会看到大多数人使用第一种方法，使用第二种方法将避免必须使用任何更好的IMO委托事件。您只需在打开时或在添加到DOM时将焦点设置为叠加，具体取决于具体情况。

Answer 3

这对你有用吗jsfiddle？

我改变了这个：

if(myID!=='overlay'){

到这个

if(myID=='overlay'){

以便您定位叠加层而不是框。

单击页面中的任意位置以关闭div

3 个答案: