Question

我正在尝试创建一个弹出窗口的小问题。

当点击一个按钮（具有特定ID的任何东西）时，它应该打开（这似乎有效）但是当它打开时我想要它，所以如果你点击它应该关闭的主弹出窗口之外的任何东西。

但是当我点击宽度为100％且高度为100％的.overeverythingCover时似乎没有关闭;

$('#activatePopOver, .overeverythingCover').click(function() {
        popUpOverEverything();
   });

function popUpOverEverything(data) {
    // if exists | remove it
    if ($('.overeverythingCover').length) {
        $('.overeverythingCover').empty();
        $('.overeverythingCover').removeClass();
        $('body').css('overflow', 'scroll');
        console.log("hehe");
    } else {
        $('body').append('<div class="overeverythingCover"</div>');
        $('.overeverythingCover').append('<div class="overEverything"</div>');
        $('body').css('overflow', 'hidden');
        $('.overEverything').html(data);
    };
}

谢谢！

Answer 1

您不能对尚不存在的元素使用“click”处理程序。你可以使用.live：

$(function() {
    $('#activatePopOver, .overeverythingCover').live('click', function() {
        popUpOverEverything();
   });

    function popUpOverEverything(data) {
        if ($('.overeverythingCover').length > 0) {
            $('.overeverythingCover').remove();
            $('body').css('overflow', 'scroll');
        } else {
            $('body').append('<div class="overeverythingCover"</div>');
            $('.overeverythingCover').append('<div class="overEverything"</div>');
            $('body').css('overflow', 'hidden');
            $('.overEverything').html(data);

            // Just close when you click outside the popup
            $('.overEverything').click(function(event){
                event.stopPropagation();
            });
        };
    }
});

见小提琴：http://jsfiddle.net/mnW7U/3/

Answer 2

使用委托事件监听器，例如：

$(document).on("click", '#activatePopOver, .overeverythingCover', function() {
    popUpOverEverything();
});

与Wobbuffet提到的一样，问题是当您绑定事件时，.overerverythingCover div不在页面上。

注意：这只适用于jQuery 1.7 +

对于旧版本，您可以使用.delegate()

Answer 3

问题在于您将click事件绑定到页面上尚不存在的元素。

我用一个简单易懂的例子更新了你的小提琴：http://jsfiddle.net/mnW7U/2/

我创建了一个popDown()函数，当单击该按钮时，该函数将与以下函数绑定：

 $('.overeverythingCover').click(function() {
      popDown();
 });

Answer 4

问题在于：

$('body').append('<div class="overeverythingCover"</div>');

在添加点击事件后附加。尝试将它添加到dom（html中的none-js）然后搞乱它的display属性。

基本弹出窗口无法正常工作

4 个答案: