jQuery UI对话框叠加 – 如何为不同的对话框设置不同的背景颜色
我使用了不同的jQuery对话框。 对于某些对话框,我想要一个透明的背景。 如果我在.ui-widget-overlay
类中更改background
CSS,那么它将应用于所有对话框。
如何为不同的对话框设置不同的背景颜色?
只需创建如下所示的样式,并在要具有透明背景的那些对话框上使用dialogClass
选项。 当然,你可以制作多种风格,并传递你想要的任何东西
//make dialog with transparent background $("#dialog").dialog({dialogClass:'transparent'}); //make default dialog $("#dialog2").dialog();
检查演示站点: http : //jsbin.com/ifoja (基本jquery,jquery ui,jquery ui css + custom css透明类)
所有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); } });
也许如果你设置!important关键字:
在对话框调用中,只需为要透明的对话框设置modal:false。
$( "#dialog-modal" ).dialog({ height: 140, modal: false });
我的解决方案类似于@RonnySherer,但它似乎不适用于带有多个jQuery UI对话框的肮脏旧IE7。 因此,除了直接设置overlay元素的不透明度之外,我只是添加/删除了除了现代浏览器之外在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"); } });
我写了下面的代码,但它仍然采用类.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','');