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

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。

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