jquery 空白/灰色显示对话框的页面

标签 jquery jquery-ui modal-dialog

如何清空显示对话框的页面。 下面是我的代码 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:

$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");
            }
        }
    });
});

已尝试

<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 类:

.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;  
}

只需将颜色和不透明度更改为您喜欢的颜色和不透明度,这将在模式打开时应用到页面。

如果!important不起作用,则说明您的设置有问题。

也许您的 jQueryUI 功能不全。确保您的元素中链接/引用了 jQueryUI js 和 css 文件。

关于jquery 空白/灰色显示对话框的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11354260/

相关文章:

javascript - 与 jquery ui 可排序和选项卡作斗争(想在选项卡周围移动项目)

jquery 模态对话框,可编辑/删除表行

css - Twitter Bootstrap 模态宽度问题

javascript - 使用 jQuery 在 html 中嵌入 URL

javascript - 歌曲的进度条

javascript - 如何使用 Qunit 测试 jquery-ui datepicker

jQuery 不适用于 Bootstrap 3 Modal dom 元素

javascript - 在发送请求之前编辑 href 链接

jquery - 使用 jQuery 更改 Div 颜色的问题

javascript - 如何通过 JQuery ui Tabs 来动态创建元素?