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

Question

I created a popup box and it will automatically appear after 5s when site is loaded.but if I click outside of the popup box the box is close.but I want to disable background when popup box displayed.if I removed the 2 code lines after "if mask is clicked" comment, my site links and others also disable since at the beginning.so how can i fix this issue.

$(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();



    }
}

Here is the some css code

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

I think "mask" is start with the site is loaded.so I want to delay the mask to add the site or something like this.How can I do this?

Answer 1

Thanks for everyone.I solved the problem by changing the code as follow.

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