1

我正在制作一个简单的 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/

我遇到的问题是，我希望仅在单击叠加层时关闭弹出窗口；但是，即使仅单击弹出框，它也会关闭

4

3 回答 3

3

好吧，在您发布的 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'
    });

并且您有一个附加的 click 事件处理程序触发fadeout.

编辑：

为了能够仅使用覆盖关闭它，请使用以下命令：

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

演示在这里

于 2013-09-30T19:13:46.650 回答
3

您需要将覆盖从模态的包装移动到占位符标记。它不应该是模态的父级。模态框上的单击事件将传播到叠加层的单击事件并最终关闭。试试这个方法：

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

演示

并添加这些：

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

    // close modal
    $('.close').click(function () {
        $('#box, #modal').fadeOut("slow");
    });
    $('#box').click(function () {
        $(this).add('#modal').fadeOut("slow");
    });
于 2013-09-30T19:19:19.720 回答
0

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");
    });
于 2013-09-30T19:23:30.393 回答