如何禁用单击对话框以外的任何内容

Question

我有一个jQuery Dialog，并且希望禁止点击对话框本身以外的任何内容（即，除了对话框之外，不要点击我的 ASPX 页面）。我已经广泛搜索并没有找到任何东西 - 这可以实现吗？

这是我的对话代码：

$('#controlSettingsForm').dialog({
                autoOpen: false,
                width: 'auto',
                maxHeight: 300,
                buttons: {
                    "Save": function () {

                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                },
            });

$('#controlSettingsForm').dialog("open");

Answer 1

使用模态 true 进行叠加：

('#controlSettingsForm').dialog({
            autoOpen: false,
            width: 'auto',
            maxHeight: 300,
            modal:true,
            buttons: {
                "Save": function () {

                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            },
        });

$('#controlSettingsForm').dialog("open");

Answer 2

只需添加参数modal: true：

$('#controlSettingsForm').dialog({
                autoOpen: false,
                width: 'auto',
                modal: true,              // <---- Add this parameter
                maxHeight: 300,
                buttons: {
                    "Save": function () {

                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                },
            });

$('#controlSettingsForm').dialog("open");

这将使对话框显示为“模态”。这意味着背景将变灰，在对话框关闭之前您无法单击它。

有关模态参数检查的更多信息和示例： http://jqueryui.com/dialog/#modal-confirmation

Answer 3

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

$('#controlSettingsForm').dialog({
            autoOpen: false,
            width: 'auto',
            maxHeight: 300,
            modal: true,
            buttons: {
                "Save": function () {

                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            },
        });

$('#controlSettingsForm').dialog("open");