Simple Form with jQuery UI

http://stackoverflow.com/questions/16645960/jquery-ui-form-doesnt-open-if-autoopen-false

by dirkk0

HTML

<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
<link rel="stylesheet" href="http://jqueryui.com/jquery-wp-content/themes/jquery/css/base.css?v=1">
<div id="dialog-form" title="Create new user">
    <form>
        <fieldset>
            <label for="name">Name</label>
            <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
            <label for="password">Password</label>
            <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
        </fieldset>
    </form>
</div>
<button id="opener">Open Dialog</button>

JavaScript

$(function () {
    $("#dialog-form").dialog({
        autoOpen: false,
        buttons: {
            "ok": function () {
                alert('ok');
                $(this).dialog("close");
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

    $("#opener").click(function () {
        $("#dialog-form").dialog("open");
    });
});