jQueryダイアログのテーマとスタイル

jQueryダイアログのタイトルバーの背景色を変更するにはどうすればよいですか？jQueryダイアログのテーマとスタイル

私はthemerollerを見ましたが、それは私にとってはうまくいかないようです。

ありがとうございます。

2009-03-31 Picflight

このようなダイアログを表示するために使用するプラグインによって異なります（jQuery自体にダイアログはありません）。 –

私はこの方法（ヘッダーの "UI-状態エラー" スタイルを追加する）を実行します。

<script type="text/javascript"> 
      $(function() { 
       $("#msg").dialog({ 
        open: function() { 
         $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error"); 
        } 

       }); 

      }); 
     </script>

出典

2009-12-02 14:17:29 DonSleza4e

javascriptで変更しないでください。 CSSを使用してください。 –

ダイアログの各要素に関連付けられたクラスがあります。

要素を検査してCSSを使用してスタイルを設定するには、Firebugを使用します。たとえば、タイトルバーには「ui-dialog-titlebar」というクラスがあります。

（これはあなたがjQueryのUIのダイアログを使用していることを前提として）

出典

2009-03-31 18:54:23 jonstjohn

あなたはUI-ダイアログタイトルバーのCSSクラスを変更することによって、それを変更することができますが、私は非常にあなたがThemeRoller toolを使用することをお勧めします。

参照：

出典

2009-03-31 18:55:23 CMS

前の例はうまくいきますが、エラーテーマの赤色だけで動作します。ここ

だけCSSのヘッダー画像を変更すると、単純な解決策：

CSS：

.ui-widget-header-custom{ 
    background: #f6a828 url(../images/ui-bg_flat_95_0a43ac_40x100.png) 50% 50% repeat-x;  
}

のjavascript：前の例とは逆に、Iを除去することを

$('#my_dialog').dialog({ 
    open: function(event, ui){ 
     $(this).parents(".ui-dialog:first").find(".ui-widget-header") 
      .removeClass("ui-widget-header").addClass("ui-widget-header-custom"); 
    } 
});

お知らせ：

removeClass("ui-widget-header")

だけではなく、上のクラスを追加する：

find(".ui-dialog-titlebar")

は、この例では、そのリンクせずにダイアログヘッダーで動作することに注意しなければなりません。

出典

2011-07-14 18:39:05

dialogClassプロパティを使用します。あなたはjqueryダイアログでどんなCSSにでも適用できます。以下は、ヘッダーとコンテンツブロックの書式設定です。

<head> 
<style> 
.main-dialog-class .ui-widget-header{background: url("/Images/your-background.png") repeat-x scroll 34px 42px #a4cf50;font-size:16px;border:0;text-transform:uppercase} 
.main-dialog-class .ui-widget-content{background-image:none;background-color:#fff} 
</style> 
<script> 
     $('#jq_dialog').dialog({ 
      title: 'Detalhes do produto', 
      modal: true, 
      resizable: false, 
      width: 500, 
      maxHeight: 400, 
      closeText: 'fechar', 
      draggable: true, 
      show: 'fade', 
      hide: 'fade', 
      dialogClass: 'main-dialog-class' 
     }); 
</script> 
</head> 
<body> 
<div id="jq_dialog">Hello StackOverflow!</div> 
</body>

出典

2012-08-16 13:16:44

私は同意します。 javascriptでクラスを適用したり削除したりするのは間違った方法です。 cssクラスは要素の状態を正確に記述しているため、その状態の間に要素の外観を変更したいだけです。 – ctb

モーダルポップアップのボタンの色を変更するのはどうですか？ –

場合によっては、CSSファイルを編集できません。

dialog = $('<div/>').dialog({ 
    title: 'Dialog with css for title bar', 
    open: function() { 
    $(this).parents(".ui-dialog:first").find('.ui-dialog-titlebar').css('background-color','#275D9E'); 
    } 
});

出典

2014-04-07 09:56:33 Hermann77

jQueryダイアログのテーマとスタイル

答えて

関連する問題