Create more serious looking jQuery error dialog?

Question

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,
    buttons: {
        "Ok" : function () {
            $(this).dialog("close");
        }
    }
});

Prima

Can't you just use your own class on the content <div>, one that forces a background image of a vicious dog or hostile space alien? – Crocodile

you should think about excessively using the <blink> tag and css properties like background: evil; font-size:incredibly big – Passional

Answer 1

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.

Unhouse

Note that if your modal is not auto open, this won't work. You'll have to do something like this: warndialog = $('#div-dialog-warning").dialog({ // all your options here}); warndialog.dialog("open").parent().addClass("ui-state-error"); The class can only be added after initialization, at least for my version of jQuery. – Comb

Answer 2

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
} );

Stewpan

Did you mean to suggest dialogClass: "ui-state-error" ? That's what worked for me. – Malloy

Answer 3

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.

Prothrombin

Answer 4

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)

Seriocomic