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

Question

我創建了一個彈出框，當網站被加載時它會自動出現在5秒之後。但是如果我在彈出框外單擊框是close.but我想在彈出框時禁用背景如果我在「if mask is clicked」評論後刪除了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; 
    } 

我認爲，「面紗」開始與該網站是loaded.so我不想耽誤面膜添加的網站或類似的東西this.How我可以這樣做嗎？

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