Recently, I created a dialog box using the code below:
$(function(){
$('#saveandcontinue').click(function(){
$('body').css('background', '#999');
$('.footer').css('background', '#999');
$('.utility-nav').css('background', '#999');
$('#savedialog').show("slow");
});
$('#directory').click(function(){
var UR = document.URL;
var email = document.getElementById('email').value;
document.cookie="emailID="+email+";path=/";
//document.cookie="UR="+UR+";path=/scenario3/";
var ID = getQuerystring("id");
document.cookie="ID="+ID+";path=/";
$('#savedialog').hide("slow");
$('body').css('background', '#FFFFFF');
$('.footer').css('background', '#FFFFFF');
$('.utility-nav').css('background', '#FFFFFF');
location.href=UR;
checkCookie();
});
$('#cnl24').click(function(){
$('#savedialog').hide("slow");
$('body').css('background', '#FFFFFF');
$('.footer').css('background', '#FFFFFF');
$('.utility-nav').css('background', '#FFFFFF');
});
$('#close24').click(function(){
$('#savedialog').hide("slow");
$('body').css('background', '#FFFFFF');
$('.footer').css('background', '#FFFFFF');
$('.utility-nav').css('background', '#FFFFFF');
});
});
However, there is an issue where the body color overlaps with the modal window. When the dialog opens, the background and content of my body are overlapping with the content of the dialog box. I need to find a way to make them appear differently.
You can see the problem in action here - http://jsfiddle.net/MW83W/1/. Click on the "Save and Continue" link to experience it for yourself.