阻止背景内容并专注于模式对话框 [英] Blocking background content and focus on modal dialog

问题描述

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

I am trying to block the background with my two jquery modal dialogs until the user closes the window. Any idea on how to achieve this?

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

By "blocking the background" I mean disabling the other elements on the page (i.e. making other elements unclickable).

这是我的下面的代码:

            // 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;
        });
    });

推荐答案

这就是您要寻找的

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

它确实会阻止您具有查看源按钮的背景.你有没有覆盖物?

It does block the background you have the view source button. Do you have any overlay at all?

尝试手动设置(不建议使用，而是通过CSS设置):

Try setting it manually(not recommended but rather trough css) :

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

当然还要将modal选项设置为true.

And of course setting the modal option to true.

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

If the color is too strong decrease the opacity accordingly.

这篇关于阻止背景内容并专注于模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！