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

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

1550

2018-06-25 22:08

起源

通过“阻止背景”，你的意思是禁用页面上的其他元素（即使其他元素不可点击）？如果是这样，你看看了吗？ modal 选项？ - Colin Brock

是的@Colin让我更新我的问题以包含它！ - methuselah

答案:

这就是你要找的东西

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

它会阻止您拥有查看源按钮的背景。你有任何叠加吗？

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

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

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

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

2018-06-25 22:17

非常感谢。我如何将它应用于上面的代码？我在哪里将模态选项设置为true并手动设置叠加？ - methuselah

当我将模态值更改为'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");
            }
        );

2017-10-16 08:08

查看API中的对话框选项，有不少。此外 modal 它设置了覆盖鼠标事件的覆盖页面，也有 closeOnEscape 如果设置为 false 不允许用户点击键盘上的转义键来关闭对话框，因此必须直接与对话框控件交互

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

2018-06-25 22:38

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

http://jqueryui.com/themeroller/

2018-01-04 22:50

在正常情况下你会是对的，链接只有答案是不合适的。但是，这个链接是不言自明的，在正常情况下我会花几分钟时间解释。似乎多余的解释如何使用主题滚轮很容易理解。此外，如果您在上面看到jQuery网站的链接 - 评论日期为2012年，此链接仍然有效。请不要混淆jQuery作为你的日常博客，其中链接丢失。 - luziio

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

答案:

热门问题

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