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

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.