Question

我一直在使用此插件来阻止用户界面：http://jquery.malsup.com/block/

该插件运行良好，只是因为jQuery UI没有做过这样的事情我会非常惊讶，因为它必须为它的Dialog功能做同样的事情。

如何使用JQuery UI阻止UI？

Answer 1

你可以做一些hacky - 调用模态，然后调用onopen回调，remove()模态本身。

$("#something").dialog({
   open: function(event, ui) { $('.ui-dialog').remove(); }
});

喂！我说这是hacky：）

或

检查模态代码并查看它是否调用阻止UI的函数。也许你可以添加一个外部引用，这样你就可以自己调用它。

或

将此HTML添加到您的文档中，并在其上调用show()或hide()。

<div class="ui-widget-overlay" style="width: 100%; height: 100%; z-index: 32767;"></div>

或（如果您不确定如何制作）

它们只是div（通常）绝对定位且100％height / width，高z-index且通常为opacity（检查如何在IE6中使用过滤器进行操作）。

您也可以将其设置为position: fixed，以便滚动时它始终存在。如果需要，您也可以通过$('body').css({ 'overflow-y': 'hidden' })隐藏滚动条。

Answer 2

要“阻止”用户界面，您只需插入一个绝对定位的div，它具有高z-index和所需的背景颜色和不透明度，使其覆盖整个页面。

Answer 3

我知道jQuery只有一个进度条。当然，你可以做到以上所有，但如果你与你已经使用的东西进行比较，它看起来太复杂了。

我的建议是尝试更改jQuery Block UI

真的很干净，有很多CSS选项。易于使用和实施任何项目。

Answer 4

<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

如何使用JQuery UI阻止UI？

4 个答案: