12

我试图用我的两个 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;
        });
    });
4

4 回答 4

9

这是你要找的吗

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

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

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

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

当然，将 modal 选项设置为 true。

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

于 2012-06-25T22:17:57.273 回答
4

当我将模态值更改为“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");
            }
        );
于 2015-10-16T08:08:54.310 回答
1

翻翻API中的对话框选项，有不少。除了modal在页面上设置一个覆盖以阻止鼠标事件之外，还有closeOnEscape一个如果设置为false不允许用户按键盘上的转义键来关闭对话框，因此必须直接与对话框控件交互

演示页面 http://jqueryui.com/demos/dialog/的选项卡中有一个重要的 API

于 2012-06-25T22:38:30.547 回答
0

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

http://jqueryui.com/themeroller/

于 2016-01-04T22:50:51.200 回答