Error & Highlight Dialogs

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

<div class="error">Error text 1</div>
<div class="error" title="Ouch!">Error text 2</div>
<div class="info">Highlight text 1</div>

CSS

strong {
    font-weight: bold;
}
p {
    margin: 2px 0;
}

JavaScript

$.widget('custom.noteBox', {
    options: {
        icon: true,
        state: 'highlight'
    },
    _create: function () {
        var icon, note = $('<p>').html(this.element.html());
        if (this.options.icon === true) {
            switch (this.options.state) {
                case 'highlight':
                    icon = 'info';
                    break;
                case 'error':
                    icon = 'alert';
                    break;
                default:
                    icon = false;
            }
        } else {
            icon = this.options.icon;
        }
        if (icon) note.prepend($('<span>')
            .addClass('ui-icon ui-icon-' + icon)
            .css({
            'float': 'left',
            'margin-right': '.3em'
        }));
        var title = this.element.attr('title');
        if (title) note.prepend($('<strong>').text(title + ' '));
        this.element.addClass('ui-widget')
            .replaceWith($('<div>')
            .addClass('ui-state-' + this.options.state + ' ui-corner-all')
            .css({
            'margin-top': '20px',
            'padding': '0 .7em'
        })
            .append(note));
    }
});


$('.error').noteBox({
    state: 'error'
});
$('.info').noteBox();
$('<div title="Note! ">I`m dynamically added #1</div>')
    .appendTo('body').noteBox({
    icon: 'folder-open'
});
$('<div title="Note! ">I`m dynamically added #2</div>')
    .appendTo('body').noteBox({
    state: 'error'
});
$('<div title="Note! ">I`m dynamically added #3</div>')
    .appendTo('body').noteBox({
    state: 'error',
    icon: 'trash'
});