设置JQuery UI模式对话框覆盖背景颜色

时间:2011-04-07 15:58:23

标签: jquery jquery-ui

当我加载对话框时,背景会变得有点灰色。我想让它变暗,但我找不到一个对此负责的财产。我怎样才能做到这一点?

6 个答案:

答案 0 :(得分:43)

这就是这个css元素:

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

位于jquery-ui-1.8.11.custom.css

的第294行

答案 1 :(得分:28)

将此CSS添加到样式表中:

.ui-widget-overlay
{
  opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;

  background: rgb(50, 50, 50) !important; /* This will make it darker */
}

答案 2 :(得分:6)

最简单的方法是使用themeroller

答案 3 :(得分:5)

与@spinlock一样,我有水平运行的条带:

要删除条带并使用自定义背景颜色,您可以在打开的事件中执行以下操作:

open : function(event, ui){
    $("body").css({
        overflow: 'hidden'
    });
    $(".ui-widget-overlay").css({
        background:"rgb(0, 0, 0)",
        opacity: ".50 !important",
        filter: "Alpha(Opacity=50)",
    });
},
beforeClose: function(event, ui) {
    $("body").css({ overflow: 'inherit' })
}

答案 4 :(得分:4)

我有Blender解决方案的螺旋锁问题,但将“背景颜色”更改为“背景”修复了这个问题。我怀疑原因是原始(jQuery-UI)CSS使用PNG图形。

答案 5 :(得分:2)

实际上对我有用的东西:

//in dialog setting code
open: function(event, ui) {
  $('.ui-widget-overlay').css({ opacity: '.5' });
},
  

我不建议直接在CSS中设置对话框的不透明度,因为这会影响   在您的网站上打开任何对话框,这可能不是预期的结果。