身体背景与模态窗口重叠如何解决？

Question

i have create one dialog box with following code

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

});

but color body is overlaping with modal window. when dialog openend background and content of my body overlap with content of dialog box so how can i make it diffent.

Here you can check my actual problem - http://jsfiddle.net/MW83W/1/ please check it by click on save and continue link.

Answer 1

If I got you right, just set it's height to auto with some css:

#savedialog {
    background: white; /* optional */
    height: auto;
}

JSfiddle