Create more serious looking jQuery error dialog?

Is there a jQuery UI class you can use to create a more severe looking error dialog box than the one below?

This is the HTML we use to create the dialog:

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

And this is how we show it:

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

You can add the ui-state-error class that comes in your theme, like this:

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

Since the dialog gets wrapped we're using .parent() to get the container including the titlebar. Your theme looks like flick so here's a demo showing that theme in action.

I know this is old but, actually, it would be more suitable to use the built-in "dialogClass" option, like so:

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

use this excellent and simple jquery notification and alert plugin

ned.im/noty

in the demo folder there is a modal sample

NOTY is a jQuery plugin that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog. Each notification is added to a queue.

dialogClass is deprecated in v1.12 of jQuery (http://api.jqueryui.com/dialog/#option-dialogClass)

Use classes instead (http://api.jqueryui.com/dialog/#option-classes)

So for >= v1.12 would be:

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

Take a look at http://api.jqueryui.com/dialog/#theming for all theme able parts

and http://api.jqueryui.com/theming/css-framework/ for all css classes.

(Don't include the . (dot) in the value string)