阻止背景内容并专注于模式对话

Question

我试图用我的两个jquery模式对话框阻止背景，直到用户关闭窗口。关于如何实现这一目标的任何想法？

通过"阻止背景"，我的意思是禁用页面上的其他元素（即使其他元素不可点击）。

这是我下面的代码：

            // sign up dialog
        $( "#aboutus_dialog" ).dialog({
            autoOpen: false,
            show: "fadein",
            hide: "fadeout"
        });
        // sign up dialog
        $( "#signup_dialog" ).dialog({
            autoOpen: false,
            show: "fadein",
            hide: "fadeout"
        });     
        // about us modal
        $('#aboutus').click(function() { 
            modal: true,
            $("#aboutus_dialog").dialog("open");
            return false;
        });
        // about us modal
        $('#signup').click(function() { 
            $("#signup_dialog").dialog("open");
            return false;
        });
    });

Answer 1

这是你要找的吗

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

它确实会阻止您拥有查看源按钮的背景。你有任何覆盖吗？

尝试手动设置（不推荐，而是通过 css）：

$(".ui-widget-overlay").attr('style','background-color: #000; opacity:1; z-index:1000;');

当然，将模态选项设置为 true。

如果颜色太强，请相应地降低不透明度。

Answer 2

当我将模态值更改为"true"（在 Angular js 中）时，所有背景元素都被禁用了。

    var options = {
                    autoOpen : false,
                    modal : true,
                    close : function(event, ui) {
                        console.log("Predefined close");
                    }
                 };
    dialogService.open("myDialog" + k, "dialogTemplateload.html", model, options)
    .then(
            function(result) {
                console.log("Close");
                console.log(result);
            },
            function(error) {
                console.log("Cancelled");
            }
        );

Answer 3

浏览 API 中的对话框选项，有很多。除了modal设置阻止鼠标事件的页面覆盖之外，还有closeOnEscape如果设置为false则不允许用户按键盘上的 Esc 键关闭对话框，因此必须直接与对话框控件交互

演示页面上的选项卡中隐藏了一个重要的APIhttp://jqueryui.com/demos/dialog/

Answer 4

尝试使用 Jquery 的主题滚轮创建自己的主题。它还有助于Jquery的UI库中模态和其他小部件的功能。

http://jqueryui.com/themeroller/