jquery blankout / grayout显示对话框的页面 [英] jquery blankout / grayout the page where dialog box is showing

问题描述

如何删除显示对话框的页面。
以下是我的代码
HTML：

How can I blankout the page where I show the dialog box. below is my code HTML:

<style>
.ui-dialog, .ui-dialog-content {
 border:1px solid #cde68c;
 border-bottom:0px;
 background-color: white !important;
 color: #333;
 font: 12px/180% Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar {
 display:none;
}
#ui-dialog-title-dialog {
 color: yellow !important;
 text-shadow: none;
}
.ui-dialog-buttonpane {
 border:1px solid #cde68c;
 border-top:0px;
 margin-bottom: 1%;
}

</style>
        <div id="dialog">
            <p><span id="emailNotice"></span></p>
        </div>

Javascript：

Javascript:

$j(document).ready(function() {

    $j('#dialog').dialog('open');
    $j('#emailNotice').html('show some notice text abcd');  

    $j('#dialog').dialog({
        modal:true,
        autoOpen: false,
        width: 600,
        buttons: {
            "Ok": function() {
                $j(this).dialog("close");
            },
            "Cancel": function() {
                className: 'cancelButtonClass',
                $j(this).dialog("close");
            }
        }
    });
});

TRIED

<style>
.ui-dialog, .ui-dialog-content {
 border:1px solid #cde68c;
 background-color: white !important;
 color: #333;
 line-height: 180%;
 font-family: Arial, Helvetica, sans-serif;
}
.ui-dialog-titlebar {
 display:none;
}
#ui-dialog-title-dialog {
 color: yellow !important;
 text-shadow: none;
}
.ui-dialog-buttonpane {
 border:1px solid #cde68c;
 border-top:0px;
 margin-bottom: 1%;
}

ui-widget-overlay { 
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
    opacity: 50;
    filter:Alpha(Opacity=50);  
}
</style>

还试过

$j('#dialog').dialog('open');
                 $j("#dialog").dialog("widget")
                 .next(".ui-widget-overlay")
                 .css("background", "#f00ba2");
....
....

推荐答案

更改默认的jQueryUI类如下：

Change the default jQueryUI class like this:

.ui-widget-overlay { 
    background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x !important;
    opacity: 100 !important;
    filter:Alpha(Opacity=100) !important;  
}

只需将颜色和不透明度更改为您喜欢的颜色，这将适用于模态打开时的页面。

Just change the color and opacity to what you like and this will be applied to the page when the modal opens.

如果！important 不起作用，则说明设置有问题。

If the !important don't work you have an issue with your setup.

也许你没有jQueryUI全功能。确保在元素中链接/引用了jQueryUI js和css文件。

Maybe you don't have jQueryUI fully functional. Make sure you have both the jQueryUI js and css files linked/referenced in your element.

这篇关于jquery blankout / grayout显示对话框的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！