如何禁用除div之外的整个身体

Question

我有一个通过ajax创建的div,我想在div弹出后禁用整个身体,直到div,除非div被关闭.
这在jquery中是否可行.请让我知道你的建议

谢谢,
Praveen Jayapal

Answer 1

你想要删除,还是隐藏身体？从技术上讲,这是不可能的,因为你需要将div附加到身体上才能看到它.你可以做的是创建一个覆盖整个身体的"面具"图层,然后使用z-index为你的div显示它在身体的顶部.

就像是:

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

可能有帮助!

要完全隐藏页面,您需要做的就是更改第21行:

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

在javascript中:

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

CSS的第7行掩码的颜色也可以改为你想要的颜色:

background-color: #000;

Answer 2

这应该够了吧..

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>