//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){
	
    $('a.btn-ok, #dialog-overlay').click(function () {      
        $('#dialog-overlay, #dialog-box').hide();        
        return false; 
    }); 
      
    // if user resize the window, call the same function again 
    // to make sure the overlay fills the screen and dialogbox aligned to center     
    $(window).resize(function () { 
          
        //only do it if the dialog box is not hidden 
        if (!$('#dialog-box').is(':hidden')) popup();        
    }); 


});

function popup(message) { 
          
    // get the screen height and width   
    var maskHeight = $(document).height();   
    var maskWidth = $(window).width(); 
      
    // calculate the values for center alignment 
    var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());   
    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2);  
      
    // assign values to the overlay and dialog box 
    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show(); 
    $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show(); 
      
    // display the message 
    $('#dialog-message').html(message); 
              
}