web-dev-qa-db-ja.com

jquery UIダイアログのカスタムスタイル

私はjquery uiダイアログのデフォルトスタイルをこれに似たものに変更しようとしています-

enter image description here

Jquery uiでCSSを変更して閉じるようにしました。

.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: .8em;
}

.ui-widget-content {
    background: #F9F9F9;
    border: 1px solid #90d93f;
    color: #222222;
}

.ui-dialog {
    left: 0;
    outline: 0 none;
    padding: 0 !important;
    position: absolute;
    top: 0;
}

#success {
    padding: 0;
    margin: 0; 
}

.ui-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    position: relative;
    padding: 0 !important;
}

.ui-widget-header {
    background: #b0de78;
    border: 0;
    color: #fff;
    font-weight: normal;
}

.ui-dialog .ui-dialog-titlebar {
    padding: 0.1em .5em;
    position: relative;
        font-size: 1em;
}

HTML

<div id="popup-msg">
    <div id="loading">
        <h2>Loading...</h2>
        <h3>Please wait a few seconds.</h3>
    </div>  

    <div id="success" title="Hurray,">
        <p>User table is updated.</p>
    </div>
</div>

THIS IS FIDDLE

しかし、このスタイルを追加すると、すべてのダイアログに適用されます。この問題を回避する方法を教えてください。

ありがとうございました。

cssjquery-ui
34
TNK

http://jsfiddle.net/qP8DY/24/ を参照してください

クラスで（私の例では "success-dialog"など）をdiv＃successに追加することができます。これは、HTMLで直接行うか、dialogClassオプションに追加することでJavaScriptで行います。

$('#success').dialog({
    height: 50,
    width: 350,
    modal: true,
    resizable: true,
    dialogClass: 'no-close success-dialog'
});

その後、必要に応じてCSSルールにsuccess-dialogクラスを追加します。 2つ（またはそれ以上）のクラスが適用された要素を示すには、間にスペースを入れずにそれらをすべて一緒に記述します。例えば：

.ui-dialog.success-dialog {
    font-family: Verdana,Arial,sans-serif;
    font-size: .8em;
}
60
Rob Kovacs

オプションdialogClassを使用して、ダイアログの一番上の要素にカスタムクラスを指定できます。

$("#success").dialog({
    ...
    dialogClass:"myClass",
    ...
});

その後、.myClass.ui-dialogを介してCSSでこのクラスをターゲットにできます。

17
YoannM

ソリューションは問題の一部のみを解決します。コンテナとコンテンツのスタイルを設定できますが、タイトルバーを変更できません。ソートの回避策を開発しましたが、ダイアログdivにidを追加し、jQuery .prevを使用して、ダイアログのdivの前の兄弟であるdivのスタイルを変更しました。これは、jQueryUIがダイアログを作成するときに、元のdivが新しいコンテナの兄弟になりますが、タイトルdivは元のdivの直前の兄弟ですが、タイトルdivではなくコンテナにもdivを選択するためのidがないためです。

HTML

<button id="dialog1" class="btn btn-danger">Warning</button>
<div title="Nothing here, really" id="nonmodal1">
  Nothing here
</div>

CSSを使用して、ダイアログのメインセクションのスタイルを設定できますが、タイトルのスタイルは設定できません

.custom-ui-widget-header-warning {
  background: #EBCCCC;
  font-size: 1em;
}

タイトルをスタイルするにはJSが必要です

$(function() {
                   $("#nonmodal1").dialog({
                     minWidth: 400,
                     minHeight: 'auto',
                     autoOpen: false,
                     dialogClass: 'custom-ui-widget-header-warning',
                     position: {
                       my: 'center',
                       at: 'left'
                     }
                   });

                   $("#dialog1").click(function() {
                     if ($("#nonmodal1").dialog("isOpen") === true) {
                       $("#nonmodal1").dialog("close");
                     } else {
                       $("#nonmodal1").dialog("open").prev().css('background','#D9534F');

                     }
                   });
    });

この例では、単純なスタイル（バックグラウンド）のみを示していますが、必要に応じて複雑にすることができます。

ここで動作を確認できます：

http://codepen.io/chris-hore/pen/OVMPay

4
Chris Hore