Question

我正在制作一个简单的jQuery弹出模式。我知道我应该只使用一个插件，但我想在使用插件之前至少理解它的工作原理，以便我创建自己的插件。

这是html：

<div id="box">
<div id="modal">
<a href="#" class="close"><div>close</div></a>
    <div class="wrapper">
        <h1 style="text-align:center">Title Here</h1>
        <p style="text-align:center">Do what ever you want here crete a form add an image gallery etc.</p>
    </div>

</div>
</div>



<div id="wrapper">
    <h1>This is a Very Simple/Lightweight jQuery Modal Pop Up!</h1>
    <a href="#" class="reveal">Click Me!</a>
</div><!-- END WRAPPER -->

css：

#modal{
background-color: #fff;
width: 500px;
height: 300px;
z-index: 50;
position:absolute;
border-radius: 8px;
}

现在是jQuery：

$(document).ready(function(){
// hide the modal on page load
$('#box').hide();

//show modal when the link is clicked
$('.reveal').click(function(e){
    e.preventDefault();

    pageWidth  = $(window).width();
    pageHeight = $(document).height();
    modalLeft = Math.max(pageWidth - $('#modal').outerWidth(),  0) / 2;
    modalTop  = Math.max($(window).height() - $('#modal').outerHeight(),  0) /   2;

    $('#box').fadeIn("slow").css({
        "background-color": "rgba(0,0,0,0.8)",
        "width"           : pageWidth,
        "height"          : pageHeight,
        "z-index"         : "10",
        'position'        :'absolute',
        'top'             :'0',
        'left'            :'0'
    });
    $('#modal').fadeIn("slow").css({
        'top'             : modalTop + $(window).scrollTop(), 
        'left'            : modalLeft + $(window).scrollLeft()
    });
});

// close modal
$('.close').click(function(){
    $('#box').fadeOut("slow");
});
$('#box').click(function(){
    $(this).fadeOut("slow");
});


});

这是一个jsfiddle所以它可以在行动中看到： http://jsfiddle.net/dNj4b/

我遇到的问题是，我希望弹出窗口仅在单击叠加层时关闭;无论如何，即使单击弹出框也会关闭

Answer 1

嗯，在你发布的jsFiddle中你有这个：

$('#box').click(function(){
    $(this).fadeOut("slow");
});

删除它。

问题是，用作叠加层的包装器/外部div是#box

 $('#box').fadeIn("slow").css({
        "background-color": "rgba(0,0,0,0.8)",
        "width"           : pageWidth,
        "height"          : pageHeight,
        "z-index"         : "10",
        'position'        :'absolute',
        'top'             :'0',
        'left'            :'0'
    });

并且你有一个点击事件处理程序，它触发fadeout。

修改

只需使用叠加层即可关闭它：

$('#box').click(function(e){ if (e.target.id != 'box'){return false;} $(this).fadeOut("slow"); });

Demo here

Answer 2

您需要将叠加层从作为模式的包装器移动到仅占位符标记。它不应该是模态的父级。模态上的单击事件将传播到叠加层的单击事件，并且它将立即关闭。试试这个：

将box移出

<div id="box"></div>
<div id="modal">    <a href="#" class="close"><div>close</div></a>

    <div class="wrapper">
            <h1 style="text-align:center">Title Here</h1>

        <p style="text-align:center">Do what ever you want here crete a form add an image gallery etc.</p>
    </div>
</div>

<强> Demo

并添加以下内容：

   $('#box, #modal').hide();

    // close modal
    $('.close').click(function () {
        $('#box, #modal').fadeOut("slow");
    });
    $('#box').click(function () {
        $(this).add('#modal').fadeOut("slow");
    });

Answer 3

http://jsfiddle.net/dNj4b/17/

将HTML更改为：

<div id="box"></div>
<div id="modal">
    <a href="#" class="close"><div>close</div></a>
    <div class="wrapper">
        <h1 style="text-align:center">Title Here</h1>
        <p style="text-align:center">Do what ever you want here crete a form add an image gallery etc.</p>
    </div>
</div>

将此添加到css：

#modal{
    background-color: #fff;
    width: 500px;
    height: 300px;
    z-index: 50;
    position:absolute;
    border-radius: 8px;
    display:none;****
}

将此添加到jquery：

// close modal
    $('.close').click(function(){
        $('#box').fadeOut("slow");
        ***$('#modal').fadeOut("slow");
    });
    $('#box').click(function(){
        $(this).fadeOut("slow");
        ***$('#modal').fadeOut("slow");
    });

单击弹出窗口时关闭模态

3 个答案:

Demo here