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

当我加载对话框时,背景会变得有点灰。 我想将其调暗一些,但找不到引起该问题的财产。 我该如何实现?

Vonder asked 2020-06-30T04:07:17Z
6个解决方案
45 votes

那是在这个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);
}

它在294的以下行中:jquery-ui-1.8.11.custom.css

Neal answered 2020-06-30T04:07:36Z
28 votes

将此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 */
}
Blender answered 2020-06-30T04:07:55Z
6 votes

最简单的方法是使用themeroller。

nfechner answered 2020-06-30T04:08:15Z
6 votes

像@spinlock一样,我也有水平运行的地带:

要删除该条并使用自定义背景色,您可以在open事件上执行以下操作:

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' })
}
bedomon answered 2020-06-30T04:08:40Z
4 votes

我在Blender的解决方案中遇到了spinlock的问题,但是将“ background-color”更改为“ background”可以解决此问题。 我怀疑原因是原始(jQuery-UI)CSS使用了该PNG图形。

David M. Anderson answered 2020-06-30T04:09:00Z
2 votes

实际上对我有用的是:

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

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

MaxZoom answered 2020-06-30T04:09:24Z
translate from https://stackoverflow.com:/questions/5583995/set-jquery-ui-modal-dialog-overlay-background-color