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

Question

我创建了一个弹出框，它会在网站加载后 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;
    }

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

Answer 1

谢谢大家。我通过如下更改代码解决了这个问题。

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);   
}