javascript - 显示自动弹出框时禁用背景

我创建了一个弹出框，当网站加载后，它会在5秒后自动出现。但是，如果我在弹出框之外单击，则该框是关闭的。但是我想在显示弹出框时禁用背景。如果我在删除弹出框后删除了2行代码“如果单击了蒙版”注释，自开始以来，我的网站链接和其他链接也被禁用。因此，我该如何解决此问题。

$(document).ready(function() {
    //Put in the DIV id you want to display
    launchWindow('#dialog');

    //if postpone button is clicked
    $('.window .postpone').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();

        $('#mask').hide();
        $('.window').hide();

        launchWindowPP(id);
    });

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



    $(window).resize(function () {

        var box = $('#boxes .window');

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        box.css('top',  winH/2 - box.height()/2);
        box.css('left', winW/2 - box.width()/2);

    });

});


function launchWindow(id) {

        //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').delay(5000).fadeIn('medium');
        $('#dialog').delay(5000).fadeIn('medium');

        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow",0.8);


        //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());
        $(id).css('left', winW/2-$(id).width()/2);

        //transition effect
        $(id).fadeIn(2000);


}


function launchWindowPP(id) {

    //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').delay(10000).fadeIn('medium');
    $('#dialog').delay(10000).fadeIn('medium');

    //$('#fanback').delay(10000).fadeIn('medium');
    $('#mask').fadeIn(1000);
    $('#mask').fadeTo("slow",0.8);


    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    $(id).css('top',  winH/2-$(id).height());
    $(id).css('left', winW/2-$(id).width()/2);

    $(id).fadeIn(2000);


}

function myFunctionSubmit(){
    if($('input[name=gender]:checked').length > 0 && $('input[name=quality]:checked').length > 0){
            $('#mask').hide();
            $('.window').hide();



    }
}

这是一些CSS代码

body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
  background-color:#000;
  display:none;
}

#boxes .window {
  position:fixed;
  left:0;
  top:0;
  width:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}


#form{
    background-color:darkolivegreen;
    color:#D5FFFA;
    border-radius:5px;
    border:3px solid rgb(211, 205, 61);
    padding: 4px 30px;
    font-Weight:700;
    width:375px;
    font-size:12px;
    float:left;
    height:auto;
    margin-left: 35px;
    }

我认为“掩码”是从站点加载开始的。所以我想延迟掩码来添加站点或类似的东西。我该怎么办？

最佳答案

谢谢大家。我通过更改代码来解决此问题。

var fpt=first_popup_time = 5000;
var ppt=postpone_popup_time = 3000;

$(document).ready(function() {
    if (!readCookie('exam_feedback_popup')) {
    setTimeout(function() { launchWindow('#dialog'); }, fpt);
    }
    //if postpone button is clicked
    $('.window .postpone').click(function (e) {
        e.preventDefault();
        $('#mask').hide();
        $('.window').hide();
        launchWindowPP(id);
    });

......

function launchWindowPP(id) {
    $('#mask').hide();
    $('.window').hide();
    setTimeout(function() { launchWindow('#dialog'); }, ppt);
}