顯示自動彈出框時禁用背景

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