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

Question

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

Это 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");
        }
    }
});

Answer 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 , поэтому вот демонстрация, показывающая эту тему в действии .

Answer 2

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

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

Answer 3

используйте этот превосходный и простой плагин jquery для уведомлений и предупреждений

ned.im / noty

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

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

Answer 4

dialogClass устарела в версии 1.1 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.

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