how to disable whole body other than a div_问答_开发者

how to disable whole body other than a div

开发者 https://www.devze.com 2023-01-17 06:59 出处：网络

I have a div which is creating through ajax, i would like to 开发者_JAVA百科disable the whole body once the div is popup and until, unless the div is closed.Is this possible in jquery. Please let me k

I have a div which is creating through ajax, i would like to 开发者_JAVA百科disable the whole body once the div is popup and until, unless the div is closed.

Is this possible in jquery. Please let me know your suggestion

Thanks,

Praveen Jayapal

You want to REMOVE, or hide the body? Technically this shouldn't be possible because you need to append the div to the body in order to see it. What you could do is create a 'mask' layer that covers the WHOLE body, then use z-index for your div to display it on top of the body.

Something like:

http://www.queness.com/post/77/simple-jquery-modal-window-tutorial

might help!

To completely hide the page all you would need to do is change line 21:

$('#mask').fadeTo("slow",0.8);

in the javascript to:

$('#mask').fadeTo("slow",1);

and the color of the mask on line 7 of the CSS can be changed to whatever you want too:

background-color: #000;

That should do the trick..

HTML:

<body>
    <div id="overlay">
        this is above the body!
    </div>
<!--...rest...-->
</body>

CSS:

#overlay {
    background-color: #ccc; /*or semitransparent image*/
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}
#ajax-div {
    z-index: 200; /*important, that it is above the overlay*/
}

Javascript:

<script type="text/javascript">
$(document).ready(function() {
    //your ajax-call
    $.ajax({
        //on success
        success: function() {
            //your logic your showing the ajax-div
            $('#overlay').show(); //or fadeIn()
        }
    })

    //use live to catch the close-click of the later added ajax-div
    $('#ajax-div a#close').live('click', function() {
        //close the ajax-div
        $(this).parent().hide();
        //close the overlay
        $('#overlay').hide(); //or, again, fadeOut()
    });
});
</script>

What it sounds like you want is something known as a modal dialog box.

There are a number of JQuery scripts to achieve this quite easily. Here are some links for you: