创建看起来更严重的 jQuery 错误对话框？答案

【问题标题】：Create more serious looking jQuery error dialog?创建看起来更严重的 jQuery 错误对话框？
【发布时间】：2010-10-25 15:32:52
【问题描述】：

是否有一个 jQuery UI 类可用于创建比下面的更严重的错误对话框？

这是我们用来创建对话框的 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");
        }
    }
});

【问题讨论】：

你不能在 <div> 的内容上使用你自己的类吗，强制使用恶狗或敌对太空外星人的背景图像？
你应该考虑过度使用<blink>标签和background: evil; font-size:incredibly big等css属性

标签： jquery jquery-ui modal-dialog jquery-ui-dialog

【解决方案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 所以here's a demo showing that theme in action。

【讨论】：

请注意，如果您的模式不是自动打开的，这将不起作用。你必须这样做：warndialog = $('#div-dialog-warning").dialog({ // all your options here}); warndialog.dialog("open").parent().addClass("ui-state-error"); 类只能在初始化后添加，至少对于我的 jQuery 版本。

【解决方案2】：

我知道这是旧的，但实际上，使用内置的“dialogClass”选项会更合适，如下所示：

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

【讨论】：

您的意思是建议 dialogClass: "ui-state-error" 吗？这对我有用。

【解决方案3】：

使用这个出色而简单的 jquery 通知和警报插件

ned.im/noty

在演示文件夹中有一个模态示例

NOTY 是一个 jQuery 插件，可以轻松创建警报 - 成功 - 错误 - 警告 - 信息 - 确认消息作为替代标准警报对话框。每个通知都添加到一个排队。

【讨论】：

【解决方案4】：

dialogClass 在 jQuery v1.12 中已弃用 (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 类。

（不要在值字符串中包含 .（点））

【讨论】：