jQuery UI - Button and Dialog

by Ryan Morris

HTML

<button>A button element</button>
<input type="submit" value="A submit button"> <a href="#">An anchor</a>

<br />
<br />
<form>
    <div id="radio">
        <input type="radio" id="radio1" name="radio">
        <label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked">
        <label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio">
        <label for="radio3">Choice 3</label>
    </div>
</form>
<div id="dialog" title="Basic dialog">
    <p>This is a dialog</p>
</div>

CSS

#dialog {
    display:none;
}

JavaScript

$(function () {

    $("input[type=submit], a, button")
        .button()
        .click(function (event) {
            $("#dialog").dialog("open");
            event.preventDefault();
        });

    $("#radio").buttonset();

    $("#dialog").dialog({
        modal: true,
        autoOpen: false,
        buttons: [{
            text: "OK",
            click: function () {
                $(this).dialog("close")
            }
        }],
    });

});