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'时（在角度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则不允许用户点击键盘上的转义键来关闭对话框因此必须直接与对话框控件进行交互

在演示页面的标签页中有一个重要的API http://jqueryui.com/demos/dialog/

Answer 4

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

http://jqueryui.com/themeroller/

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

4 个答案: