how to disable whole body other than a div

javascript jquery html

16,830

Solution 1

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;

Solution 2

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>

Solution 3

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:

Hope that helps.

Solution 4

OK ... best idea is use jquey.ui if you use jquery.

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

You can choose theme and download only components you like..

Then just include js and css a place img folder and call dialog. It is quiet easy...

View more solutions

16,830

praveenjayapal

Updated on May 04, 2022

Comments

praveenjayapal almost 2 years

I have a div which is creating through ajax, i would like to 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
- annakata over 13 years
  
  Sounds suspiciously like a lightbox. cf. leandrovieira.com/projects/jquery/lightbox
roborourke over 13 years

A for effort there Tim! Good on you.