javascript 如何禁用除 div 以外的整个身体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3767936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to disable whole body other than a div
提问by praveenjayapal
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
我有一个通过 ajax 创建的 div，我想在 div 弹出后禁用整个主体，直到 div 关闭。
这在 jquery.js 中可能吗？请让我知道您的建议
Thanks,
Praveen Jayapal
谢谢，
普拉文贾亚帕尔
回答by Alex
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.
你想移除，还是隐藏尸体？从技术上讲，这应该是不可能的，因为您需要将 div 附加到正文中才能看到它。你可以做的是创建一个覆盖整个身体的“面具”层，然后使用 z-index 为你的 div 显示它在身体的顶部。
Something like:
就像是：
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
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:
要完全隐藏页面，您只需更改第 21 行：
$('#mask').fadeTo("slow",0.8);
$('#mask').fadeTo("slow",0.8);
in the javascript to:
在 javascript 中：
$('#mask').fadeTo("slow",1);
$('#mask').fadeTo("slow",1);
and the color of the mask on line 7 of the CSS can be changed to whatever you want too:
并且 CSS 第 7 行的遮罩颜色也可以更改为您想要的任何颜色：
background-color: #000;
background-color: #000;
回答by Tim
That should do the trick..
这应该够了吧..
HTML:
HTML：
<body>
<div id="overlay">
this is above the body!
</div>
<!--...rest...-->
</body>
CSS:
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:
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>
回答by Spudley
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:
有许多 JQuery 脚本可以很容易地实现这一点。这里有一些链接供您参考：
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
http://choosedaily.com/1178/15-jquery-popup-modal-dialog-plugins-tutorials/
http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Hope that helps.
希望有帮助。
回答by jatt
OK ... best idea is use jquey.ui if you use jquery.
好的......如果你使用jquery，最好的主意是使用jquey.ui。
http://jqueryui.com/demos/dialog/#modal
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...
然后只包含 js 和 css 一个地方 img 文件夹并调用对话框。很安静很容易...
