【问题标题】: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");
        }
    }
});

【问题讨论】:

  • 你不能在 &lt;div&gt; 的内容上使用你自己的类吗,强制使用恶狗或敌对太空外星人的背景图像?
  • 你应该考虑过度使用&lt;blink&gt;标签和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 类。

    (不要在值字符串中包含 .(点))

    【讨论】:

      猜你喜欢
      • 2011-11-21
      • 2011-10-20
      • 2017-10-09
      • 1970-01-01
      • 1970-01-01
      • 2016-07-22
      • 1970-01-01
      • 2011-12-10
      • 1970-01-01
      相关资源
      最近更新 更多