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

従来のダイアログとは別のユニークなCSSを使用してモーダルダイアログ（UIダイアログを使用）をスタイルすることを検討しているので、それぞれが違う2つのjQueryダイアログがあります。jQuery UIダイアログ個々のCSSスタイル

私は1つ、例えば、

<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にはクラスがありません10、私はaddClassをプラグインに侵入することなく実行できません。

代わりに、bodyのような要素に固有のクラス/ ID（必要なものに応じて）を持たせることもできますが、両方のダイアログを同じページに配置することができなくなります。

どうすればいいですか？

出典

2009-08-20 Rio

ファイル名を指定して実行]ダイアログがAjaxに呼び出された直後に、次の

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

これが開かれたので、それが使用される各1のために変更することができるダイアログにだけ適用されます。

（このクイック答えはスタックオーバーフロー上の別の応答に基づいています。）

出典

2009-08-20 20:18:25 Rio

私の場合は、私の背景色を上書きしていたので、$（ ".ui-dialog-titlebar"）removeClass（ "ui-widget-header"）を追加しなければなりませんでした。 – maxivis

私の場合、ui-dialog-contentはトリックでした。 $（ ".ui-dialog-content"）。addClass（ "customclass"）; –

あなたは、このようなタイトルにクラスを追加することができます

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

出典

2009-08-20 19:45:25

ただし、 '.ui-dialog-titlebar'にはクラス' .dialog1'がありません。.dialog1 {display：none;} w私が望ましくないダイアログボックスの内容全体を隠してしまいます。 – Rio

.ui-dialog-titlebarはどこですか？ –

これはjQueryダイアログ（http://docs.jquery.com/UI/Dialog/Theming）の一部です – Rio

これらを試してみてください。

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

私はあなたのために与えることができる最高の勧告は、Firefoxでページをロードすることで、開きますダイアログボックスを開き、Firebugで検査してから、コンソールでさまざまなセレクタを試してみて、動作するものを確認してください。他のものの一部を使用する必要がありますdescendant selectors。

出典

2009-08-20 20:09:26

それは動作しません、私も試みた、Firebugを使用しています。だから私が投稿したのは;-) – Rio

.ui-dialog-titlebarは* dialog_style1を囲んでいるので、＃dialog_style1はダイアログボックスの内容にうまく適用されますが、タイトル自体には適用されません。 – Rio

これを行うための標準的な方法は、jQueryのUIのCSS Scopesである：

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

残念ながら、jQueryのUIのダイアログが動きますドキュメントの最後にDOM要素を対話させて、潜在的なZ-Indexの問題を修正します。これはスコープが機能しないことを意味します（これはもはや ".myCssScope"祖先を持ちません）。

Christoph Herold designed a workaround私はimplemented as a jQuery pluginでした。おそらくそれが役に立ちます。

出典

2009-08-20 20:21:36 orip

はUI dialog documentationによると、ダイアログプラグインはこのような何かを生成します。

あなたはjQueryの 最も近い（）メソッドを使用する正確第一または第二のダイアログボックスに任意のクラスに追加することができますどのような意味

<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>

。たとえば、

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

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

などです。

出典

2011-04-08 12:09:14 Vasilij

私は最も近い解決策が好きです – gigi

現在のバージョンのダイアログには、あなたのIDで使用できるオプション「dialogClass」があります。私は同様の答えを見つけるためにしようとしていたとき例えば、

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

その後CSSが

.dialog_style1 {color:#aaa;}

出典

2011-07-21 21:10:27 MorganTiley

これは実際には答えよりも私を助けました。私自身のカスタムスタイルを定義することで、すべてのUI要素をチェーンクラスとして再定義できます。つまり、.dialog_style1 .ui-dialog-title -etc。選択された回答によって、ダイアログのメインコンテンツが再定義されますが、ヘッダーとフッターは再定義されません。 –

静的CSSクラスを使用できる場合は、javascriptを使用しない方が良いです。この回答は受け入れられたものよりも優れています。 – RomanKapitonov

wootは40番目のupvoteを提供しました。いい答えだ！ – Loktar

になり、この問題は私のために上がって。考えてみましょう：

abcはあなたの「CSSラッパー」の名前である

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

は - 私はEvgeni Nabokovから答えを見つけスタックオーバーフローの質問Custom CSS scope and jQuery UI dialog themesを参照してください。 jQuery UIダイアログボックスで使用されているCSSラッパーの詳細については、以下を参照してください（ただし、CSSラッパーの問題は実際には解決していません）。 - 上記のコメントが必要です。Using Multiple jQuery UI Themes on a Single Page 。（フィラメントブログ）

出典

2012-08-28 13:37:24 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>

出典

2013-04-16 20:23:24 Steef

さて、ありがとうございました！私の周りを見つけようと、あまりにもうんざりしている。 4 cssはjquery jsファイルを大量にファイルします。私はあなたのやり方をしました。私のレイアウトで最も低いCSSファイルが見つかりました。 y A！私はタイトルを使いたいと思っていましたが、閉じるボタンの代わりに "x"を使いたいと思います。私はそれが私を待っていることを知っている。 – JustJohn

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

答えて

関連する問題