Создать более серьезный диалог jQuery error?

Существует ли класс jQuery UI, который вы можете использовать для создания более серьезного диалогового окна с ошибкой, чем приведенное ниже?

alt text

Это HTML, который мы используем для создания диалога:

<div style="display:none" id="div-dialog-warning">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span><div/></p>
</div>

И вот как мы это показываем:

$("#div-dialog-warning").dialog({
    title: t,
    resizable: false,
    height: 160,
    modal: true,
    buttons: {
        "Ok" : function () {
            $(this).dialog("close");
        }
    }
});

Ответы

Ответ 1

Вы можете добавить класс ui-state-error, который входит в вашу тему, например:

$("#div-dialog-warning").dialog({
    title: t,
    resizable: false,
    height: 160,
    modal: true,
    buttons: {
        "Ok" : function () {
            $(this).dialog("close");
        }
    }
}).parent().addClass("ui-state-error");

Поскольку диалоговое окно завершается, мы используем .parent(), чтобы получить контейнер, включая заголовок. Ваша тема выглядит как flick, поэтому здесь показана демонстрация этой темы в действии.

Ответ 2

Я знаю, что это старый, но на самом деле было бы более удобно использовать встроенный параметр dialogClass, например:

$("#div-dialog-warning").dialog( {
    buttons: {
        "Ok" : function () {
            $(this).dialog("close");
        }
    },
    dialogClass: "error",
    height: 160,
    modal: true,
    resizable: false,
    title: t
} );

Ответ 3

используйте это превосходное и простое уведомление о загрузке jQuery и плагин alert

ned.im/noty

в демо-папке есть модальный образец

NOTY - это плагин jQuery, который позволяет легко создавать оповещения - успех - error - warning - information - подтверждающие сообщения как альтернативный стандартный диалог оповещений. Каждое уведомление добавляется к очереди.

Ответ 4

dialogClass устарел в v1.12 jQuery (http://api.jqueryui.com/dialog/#option-dialogClass)

Используйте classes вместо этого (http://api.jqueryui.com/dialog/#option-classes)

Итак, для >= v1.12 будет:

$("#div-dialog-warning").dialog({
    title: t,
    resizable: false,
    height: 160,
    modal: true,
    classes: {
        "ui-dialog": "ui-state-error"
    },
    buttons: {
        "Ok" : function () {
            $(this).dialog("close");
        }
    }
});

Взгляните на http://api.jqueryui.com/dialog/#theming для всех частей, способных работать с темами

и http://api.jqueryui.com/theming/css-framework/ для всех классов css.

(Не включайте. (точка) в строку значений)