jQuery UI对话框覆盖
问题描述:
我已经使用了不同的jQuery对话框。对于一些对话框,我想要一个透明的背景。 如果我更改.ui-widget-overlay
类中的background
CSS,那么它将应用于所有对话框。jQuery UI对话框覆盖
如何为不同的对话框设置不同的背景颜色?
答
只需创建一个如下所示的样式,并在想要透明背景的对话框上使用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();
检查演示网站:http://jsbin.com/ifoja(基本的jQuery,jQuery UI的,jQuery UI的CSS +自定义CSS透明类)
答
我写了下面的代码但它仍然以阶级背景.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','');
答
也许如果你设置了重要的关键字:
<style type="text/css" media="screen">
.transparent { background:transparent !important; }
</style>
答
在您的对话框调用中,只需为要透明的对话框设置模态:false。
$("#dialog-modal").dialog({
height: 140,
modal: false
});
答
只有一个覆盖所有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);
}
});
答
我的解决方案类似于@RonnySherer,但它似乎并没有在眉头老IE7工作与多个jQuery UI的对话。因此,除了直接设置叠加元素的不透明度外,我还简单地添加/删除了除了现代浏览器之外在IE7中工作的CSS类。
CSS类:
div.modalOverlaySolid
{
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
的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");
}
});
检查演示链接 – jitter 2009-12-11 14:18:34