javascript 如何使用 JQuery UI 阻止 UI？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4011589/
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 do I block the UI using JQuery UI?
提问by Billy ONeal
I've been using this plugin to block the UI: http://jquery.malsup.com/block/
我一直在使用这个插件来阻止 UI：http: //jquery.malsup.com/block/
The plugin works excellently, it's just that I'd be enormously surprised if jQuery UI didn't do such a thing already, given that it must do effectively the same thing for it's Dialog feature.
该插件运行良好，只是如果 jQuery UI 还没有做这样的事情，我会感到非常惊讶，因为它必须为它的 Dialog 功能有效地做同样的事情。
How does one block the UI using JQuery UI?
如何使用 JQuery UI 阻止 UI？
采纳答案by alex
You could do something hacky - call the modal, then on the onopencallback, remove()the modal itself.
你可以做一些hacky - 调用模态，然后在onopen回调中，remove()模态本身。
$("#something").dialog({
open: function(event, ui) { $('.ui-dialog').remove(); }
});
Hey! I said it was hacky :)
嘿！我说这是hacky :)
or
或者
Examine the Modal code and see if it calls a function to block the UI. Perhaps you could add an external reference to it so you can call it yourself.
检查 Modal 代码并查看它是否调用函数来阻止 UI。也许您可以向它添加一个外部引用，以便您可以自己调用它。
or
或者
Add this HTML to you document, and call show()or hide()on it.
将此 HTML 添加到您的文档中，然后调用show()或hide()在它上面。
<div class="ui-widget-overlay" style="width: 100%; height: 100%; z-index: 32767;"></div>
or (if you are unsure how they are made)
或（如果您不确定它们是如何制作的）
They are simply a div(commonly) absolutely positioned and 100% height/width, with a high z-indexand usually an opacity(check out how to do it in IE6 with filters).
它们只是一个div（通常）绝对定位和 100% height/ width，具有高z-index并且通常是opacity（查看如何在 IE6 中使用过滤器进行操作）。
You can also set it to position: fixedso it will always be there if you scroll. You can also hide the scrollbars if you want by doing $('body').css({ 'overflow-y': 'hidden' }).
您也可以将其设置为position: fixed这样，如果您滚动它，它将始终存在。如果需要，您还可以通过执行 来隐藏滚动条$('body').css({ 'overflow-y': 'hidden' })。
回答by Chetan Sastry
To "block" the UI, you just insert an absolutely positioned div with a high z-index and desired background color and opacity such that it covers the whole page.
要“阻止”UI，您只需插入一个绝对定位的具有高 z-index 和所需背景颜色和不透明度的 div，使其覆盖整个页面。
回答by Adrian P.
jQuery have only a progress bar as I know. Of course you can do all above but it looks too complicate to manage if you compare with what you are using already.
据我所知，jQuery 只有一个进度条。当然，您可以执行以上所有操作，但是如果与您已经使用的相比，它看起来太复杂而无法管理。
My recommandation is to try changing jQuery Block UI
我的建议是尝试更改jQuery Block UI
Really clean and have many CSS options. Easy to use and implement on any project.
真的很干净，有很多 CSS 选项。易于在任何项目上使用和实施。
回答by Sameer Parab
<div id="__messageBox_wait" class="messageBoxArea" style="display: none; cursor: default">
<div>
<label id="__messageBox_wait_text" style="vertical-align: middle">
Please wait</label>
</div>
</div>
function blockUI() {
var boxHtml = $('#__messageBox_wait');
var message = "Please wait...";
$('#__messageBox_wait_text').text(message);
$.blockUI({
theme: false,
title: 'Message',
message: boxHtml,
css: 'width:15%'
});
}
$.unblockUI(); -- call to Unblock UI
blockUI(); --- call to block UI
