Question

我正在使用电子商务网站。我必须创建一个用于验证年龄的弹出窗口。我已经创建了一个用于验证年龄的弹出框。它工作正常但是当我在框外点击时消失了。盒子不应该消失点击外面或按下逃生也。如果在外面点击后我怎么能防止消失？以下是我的代码：

$(document).ready(function () {

    var id = '#dialog';

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({
        'width': maskWidth,
        'height': maskHeight
    });

    //transition effect		
    $('#mask').fadeIn(500);
    $('#mask').fadeTo("slow", 0.9);

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top', winH / 2 - $(id).height() / 2);
    $(id).css('left', winW / 2 - $(id).width() / 2);

    //transition effect
    $(id).fadeIn(2000);

    //if close button is clicked
    $('.window #close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();
    });

    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
    });

});

#mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9000;
    background-color: #000;
    display: none;
}

#boxes .window {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    height: 300px;
    display: none;
    z-index: 9999;
    padding: 20px;
    /*    border-radius: 15px;*/
    text-align: center;
}

#boxes #dialog {
    width: 300px;
    height: 300px;
    padding: 10px;
    background-color: #ffffff;
    font-family: 'Segoe UI Light', sans-serif;
    font-size: 15pt;
}

.maintext {
    text-align: center;
    font-family: "Segoe UI", sans-serif;
    text-decoration: none;
}

#lorem {
    font-family: "Segoe UI", sans-serif;
    font-size: 12pt;
    text-align: center;
}

<div id="boxes" data-backdrop="static" data-keyboard="false">
    <md-card>
        <div style="display: none;" id="dialog" class="window">
            <h2 style="margin:20px;color:red"><b>SIMPLYSALT</b></h2><br>
            <div id="lorem">
                <h3><b>Are You Sure You're 21</b> </h3>
                <h4>Sorry,dog years don't count</h4>
            </div>
            <br>
            <div>
                <button href="http://webenlance.com/" id="close" class="agree btn-lg btn-success" align="center" style="color:white;padding:5px">Yup,I'm 21 years age or Older</button></div>
        </div>
        <div style="width: 1478px; font-size: 32pt; color:white; height: 602px; display: none; opacity: 0.8;" id="mask"></div>
    </md-card>
</div>

Answer 1

您需要删除执行此操作的功能。

<强> JS（删除）：

//if mask is clicked
$('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
});

JSFiddle Demo

如何在外部点击或在jquery中按下escape时防止盒子内容消失？

1 个答案: