Пользовательский стиль для jquery ui dialogs

Я пытаюсь изменить стиль по умолчанию jquery ui по умолчанию для чего-то подобного -

Я получил его, чтобы закрыть изменение CSS в jquery ui..

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

ЭТО - FIDDLE

Но когда я добавляю этот стиль, он применим ко всем моим диалогам. Может ли кто-нибудь сказать мне, как я могу избежать этой проблемы.

Спасибо.

Ответ 1

См. http://jsfiddle.net/qP8DY/24/

Вы можете добавить класс (например, "диалог успеха" в моем примере) к успеху div #, либо непосредственно в вашем HTML, либо в вашем JavaScript, добавив параметр dialogClass, как я уже сделал.

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

Затем просто добавьте класс success-dialog к вашим правилам CSS, если это необходимо. Чтобы указать элемент с двумя (или более) классами, применяемыми к нему, просто напишите их все вместе, без пробелов между ними. Например:

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

Ответ 2

Вы можете указать собственный класс в верхнем элементе диалога с помощью опции dialogClass

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

Затем вы можете настроить этот класс в CSS с помощью .myClass.ui-dialog.

Ответ 3

Решение решает только часть проблемы, это может позволить вам стиль контейнера и содержимого, но не позволяет изменять заголовок. Я разработал обходное решение, но добавив id в диалог div, а затем с помощью jQuery.prev изменил стиль div, который является предыдущим родством диалогового div. Это работает, потому что, когда jQueryUI создает диалог, ваш исходный div становится родным братом нового контейнера, но заголовок div является непосредственно предыдущим братом для вашего исходного div, но ни контейнер, ни заголовок div не имеют идентификатора, чтобы упростить выбор div.

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