jQuery UI 对话框覆盖 - 如何为不同的对话框设置不同的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1886678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI dialog overlay - how to set different background colors for different dialogs
提问by shaz
I have used different jQuery dialogs. For some dialogs I want a transparent background.
If I change the backgroundCSS in the .ui-widget-overlayclass then it will apply to all the dialogs.
我使用过不同的 jQuery 对话框。对于某些对话框，我想要一个透明的背景。如果我更改类中的backgroundCSS，.ui-widget-overlay那么它将应用于所有对话框。
How to set different background colors for different dialogs?
如何为不同的对话框设置不同的背景颜色？
回答by jitter
Just create a style like the following and use the dialogClassoption on those dialogs you want to have a transparent background. Of course you can make multiple styles and pass in whatever you want
只需创建一个如下所示的样式，并dialogClass在您想要具有透明背景的那些对话框上使用该选项。当然你可以做出多种样式，传入任何你想要的
<style type="text/css" media="screen">
.transparent { background:transparent }
</style>
//make dialog with transparent background
$("#dialog").dialog({dialogClass:'transparent'});
//make default dialog
$("#dialog2").dialog();
Check demo site: http://jsbin.com/ifoja(basic jquery, jquery ui, jquery ui css + custom css transparent class)
查看演示站点：http: //jsbin.com/ifoja（基本jquery、jquery ui、jquery ui css + 自定义css透明类）
回答by Ronny Sherer
There is only one overlay for all jQuery widgets. Therefor we have to change it's opacity on demand:
所有 jQuery 小部件只有一个覆盖层。因此，我们必须根据需要更改它的不透明度：
var overlayOpacityNormal = 0.3, overlayOpacitySpecial = 0;
$('#idOfDlg').dialog({
modal: true,
open: function()
{
overlayOpacityNormal = $('.ui-widget-overlay').css('opacity');
$('.ui-widget-overlay').css('opacity', overlayOpacitySpecial);
},
beforeClose: function()
{
$('.ui-widget-overlay').css('opacity', overlayOpacityNormal);
}
});
回答by Ronny Sherer
Maybe if you set the !important keyword:
也许如果你设置了 !important 关键字：
<style type="text/css" media="screen">
.transparent { background:transparent !important; }
</style>
回答by Jason
In your dialog call, just set modal:false for the dialogs you want transparent.
在您的对话框调用中，只需为您想要透明的对话框设置 modal:false 。
$( "#dialog-modal" ).dialog({
height: 140,
modal: false
});
回答by shaz
I wrote the below code but it still taking the background of class .ui-widget-overlay
我写了下面的代码，但它仍然以课堂为背景 .ui-widget-overlay
$("#dialog_empty").dialog({
dialogClass:'transparent',
resizable: false,
draggable: false,
modal: true,
height: 0,
width: 0,
autoOpen: false,
overlay: {
opacity: 0
}
});
$('#dialog_empty').dialog('open');
$('#dialog_empty').css('display','');
回答by Xman82FTW
My solution is similar to @RonnySherer, but it didn't seem to work in cruddy old IE7 with multiple jQuery UI dialogs. So instead of directly setting the opacity of the overlay element I simply added/removed a CSS class which worked in IE7 in addition to modern browsers.
我的解决方案类似于@RonnySherer，但它似乎不适用于带有多个 jQuery UI 对话框的旧 IE7。因此，我没有直接设置覆盖元素的不透明度，而是简单地添加/删除了一个 CSS 类，除了现代浏览器之外，该类还可以在 IE7 中使用。
CSS Class:
CSS类：
div.modalOverlaySolid
{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
Javascript:
Javascript：
$(div#divModalDialog).dialog({
modal: true,
open: function () {
$(this).closest(".ui-dialog").next(".ui-widget-overlay").addClass("modalOverlayPrivate");
},
beforeClose: function() {
$(this).closest(".ui-dialog").next(".ui-widget-overlay").removeClass("modalOverlayPrivate");
}
});
