Display Messages with jQuery UI

Question

I saw these on jQuery UI's themes page, and thought they were neat.

I wonder how to display messages with these styles both in a static way and with JavaScript.

Thanks in advance.

Answer 1

Using Chrome Developer Tools, I inspected the HTML of the error message. You can do the same for the other one or you can check out the jQuery UI CSS Framework.

HTML

<div class="ui-widget">
    <div class="ui-state-error ui-corner-all" style="padding: 0 .7em;"> 
        <p>
            <span class="ui-icon ui-icon-alert" 
                style="float: left; margin-right: .3em;"></span>
            <strong>Alert:</strong> Sample ui-state-error style.
        </p>
    </div>
</div>

CSS

body {
    font-family: Verdana,Arial,sans-serif;
    font-size: 10px;
}

p {
    margin: 1em 0;   
}

strong {
    font-weight: 900;   
}

You can use the addClass method to add these classes programmatically using JS. Also see the show and hide methods which you can use to show/hide these messages.

<button id="show">Show</button>
<button id="hide">Hide</button>

$("#show").click(function() {
    $(".ui-widget").show();
});

$("#hide").click(function() {
    $(".ui-widget").hide();
});

See fiddle.