web-dev-qa-db-ja.com

jQuery UIダイアログの個々のCSSスタイル

従来のダイアログとは別の独自のCSSでモーダルダイアログ（UIダイアログを使用）のスタイルを設定するため、本質的にはそれぞれが異なる2つのjQueryダイアログが必要です。

たとえば、スタイルを設定しました

<div id="dialog_style1" class="dialog1 hidden">One content</div>

そして別の

<div id="dialog_style2" class="dialog2 hidden">Another content</div>

残念ながら、ダイアログボックスの一部をスタイル設定するために別のCSSを使用していることに気付きました。

.dialog1 .ui-dialog-titlebar { display:none; }
.dialog2 .ui-dialog-titlebar { color:#aaa; }

.ui-dialog-titlebarにはクラス.dialog1がないため機能しません。また、プラグインに割り込まずにaddClassを実行することもできません。

別の方法は、bodyのような要素に一意のクラス/ IDを持たせることです（どちらを使用するかによって異なります）が、同じページに両方のダイアログを含めることができません。

これどうやってするの？

jquerycssjquery-uidialogmodal-dialog
34
Rio

Ajax でダイアログが呼び出された直後に次を実行します。

    $(".ui-dialog-titlebar").hide();
    $(".ui-dialog").addClass("customclass");

これは開かれているダイアログにのみ適用されるため、使用するダイアログごとに変更できます。

（この簡単な答えは、Stack Overflowの別の応答に基づいています。）

23
Rio

ダイアログの現在のバージョンには、idで使用できる「dialogClass」オプションがあります。例えば、

$('foo').dialog({dialogClass:'dialog_style1'});

[〜＃〜] css [〜＃〜] は

.dialog_style1 {color:#aaa;}
62
Morgan T.

私が同様の答えを見つけようとしていたときに、この問題は私に判明しました。考慮してください：

    $('.ui-dialog').wrap('<div class="abc" />');
    $('.ui-widget-overlay').wrap('<div class="abc" />');

abcは「CSSラッパー」の名前です-スタックオーバーフローの質問を参照してください カスタムCSSスコープとjQuery UIダイアログテーマここで Evgeni Nabokov からの答えを見つけました。 jQuery UI ダイアログボックスで使用するCSSラッパーの詳細については、次を参照してください（ただし、CSSラッパーの問題は実際には解決されないことに注意してください）ダイアログボックス-そこに役立つには上記のコメントが必要です、単一ページで複数のjQuery UIテーマを使用（フィラメントのブログ）。

4
Steve

インラインスタイルでjQueryクラスをオーバーライドするだけで、カスタムスタイルを作成しました。そのため、ページの上部にjQuery CSSがリンクされており、その直後に変更する必要があるクラスをオーバーライドします。

<head>
    <link href="/Content/theme/base/jquery.ui.all.css" rel="stylesheet"/>

    <style type="text/css">
        .ui-dialog .ui-dialog-content
        {
            position: relative;
            border: 0;
            padding: .5em 1em;
            background: none;
            overflow: auto;
            zoom: 1;
            background-color: #ffd;
            border: solid 1px #ea7;
        }

        .ui-dialog .ui-dialog-titlebar
        {
            display:none;
        }

        .ui-widget-content
        {
            border:none;
        }
    </style>
</head>
3
Steef

Iダイアログのドキュメント によると、ダイアログプラグインは次のようなものを生成します。

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div class="ui-dialog-content ui-widget-content" id="dialog_style1">
      <p>One content</p>
   </div>
</div>

つまり、jQueryのclosest（）メソッドを使用して、最初または2番目のダイアログに正確に任意のクラスに追加できるものを意味します。例えば：

$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1');

$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');

次に、CSS。

3
Vasilij

これを行う標準的な方法は、jQuery UIの CSS Scopes を使用することです。

<div class="myCssScope">
   <!-- dialog goes here -->
</div>

残念ながら、jQuery UIダイアログはダイアログのDOM要素をドキュメントの最後に移動し、潜在的なz-indexの問題を修正します。これは、スコープが機能しないことを意味します（「.myCssScope」の祖先はなくなります）。

Christoph Herold 回避策の設計 これは jQueryプラグインとして実装 。

2
orip

次のようにクラスをタイトルに追加できます。

$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');
1
Daniel Moura

これらを試してください：

#dialog_style1 .ui-dialog-titlebar { display:none; }
#dialog_style2 .ui-dialog-titlebar { color:#aaa; }

Firefoxでページを読み込み、ダイアログを開いてFirebugで検査し、コンソールで別のセレクターを試して、何が機能するかを確認することをお勧めします。他のいくつかを使用する必要があるかもしれません 子孫セレクター 。

0
Pawel Krakowiak