Geek Answers Handbook

How to disable the whole body except div


I have a div that is created via ajax, I would like to disconnect the whole body when the div pops up, and until the div is closed.
This is possible in jquery. Please let me know your suggestion.

Thanks,
Pravein Jayapal

+5
source share
4 answers

Do you want to DELETE or hide the body? Technically, this should not be possible, because you need to add a div to the body in order to see it. What you can do is create a “mask” layer that spans the WHOLE body, and then use the z-index for your div to display it on top of the body.

Sort of:

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

!

, , , 21:

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

javascript :

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

7 CSS , :

background-color: #000;

+9

.

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>
+6

... - jquey.ui, jquery.

http://jqueryui.com/demos/dialog/#modal

You can choose a theme and download only those components that you like.

Then just include js and css in the img folder of the folder and the call dialog. Calm ...

+1
source

More articles:


All Articles