jQuery UI对话框覆盖

我已经使用了不同的jQuery对话框。对于一些对话框，我想要一个透明的背景。如果我更改.ui-widget-overlay类中的background CSS，那么它将应用于所有对话框。jQuery UI对话框覆盖

如何为不同的对话框设置不同的背景颜色？

2009-12-11 shaz

只需创建一个如下所示的样式，并在想要透明背景的对话框上使用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透明类）

来源

2009-12-11 09:03:33 jitter

我写了下面的代码但它仍然以阶级背景.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','');

来源

2009-12-11 10:37:35 shaz

检查演示链接 – jitter 2009-12-11 14:18:34

也许如果你设置了重要的关键字：

<style type="text/css" media="screen"> 
    .transparent { background:transparent !important; } 
</style>

来源

2010-11-17 17:19:27

在您的对话框调用中，只需为要透明的对话框设置模态：false。

$("#dialog-modal").dialog({ 
      height: 140, 
      modal: false 
     });

来源

2011-10-07 14:51:04 Jason

只有一个覆盖所有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); 
    } 
});

来源

2012-01-30 10:00:36

我的解决方案类似于@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"); 
    } 
});

来源

2012-02-24 19:07:18 Xman82FTW

jQuery UI对话框覆盖

回答

相关问题