5

さまざまな jQuery ダイアログを使用しました。一部のダイアログでは、透明な背景が必要です。backgroundクラスのCSSを変更する.ui-widget-overlayと、すべてのダイアログに適用されます。

異なるダイアログに異なる背景色を設定する方法は?

4

6 に答える 6

4

次のようなスタイルを作成し、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-11T09:03:33.567 に答える
3

すべての jQuery ウィジェットに対してオーバーレイは 1 つだけです。そのため、必要に応じて不透明度を変更する必要があります。

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-30T10:00:36.520 に答える
1

!important キーワードを設定した場合:

<style type="text/css" media="screen">
    .transparent { background:transparent !important; }
</style>
于 2010-11-17T17:19:27.123 に答える
0

私の解決策は@RonnyShererに似ていますが、複数のjQuery UIダイアログを備えた古いIE7では機能しないようです。そのため、オーバーレイ要素の不透明度を直接設定する代わりに、最新のブラウザーに加えて 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-24T19:07:18.150 に答える
0

ダイアログの呼び出しで、透明にするダイアログに modal:false を設定するだけです。

$( "#dialog-modal" ).dialog({
            height: 140,
            modal: false
        });
于 2011-10-07T14:51:04.817 に答える
0

以下のコードを書きましたが、それでもクラスの背景を取っています.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-11T10:37:35.890 に答える