jQuery UI Modal弹出窗口-按钮单击

Question

我正在尝试将我的注册按钮置于模式窗口中的表单领导中，该窗口将显示用户信息的输入。 到目前为止，我有3个问题。

1. 关闭模式窗口后，我的表单丢失了
2. 我想尽可能将模式窗口的“关闭”按钮重命名为“确认”
3. 关闭（确认）模态窗口后，我想返回到网页，并且表单为空（无上一个输入）

到目前为止，我的代码：

HTML-形式：

<div id="myForm">
    <form name="myForm" method="POST">
        <fieldset>
            <legend>Register your interest</legend>
            <div id="divpopup">
            <p><label class="title" for="name">Your name:</label>
                <input type="text" name="name" id="name"><br />
                <label class="title" for="email">Your email:</label>
                <input type="text" name="email" id="email"></p>
                <label class="title" for="persons">Persons:</label>
                <input id="personsId" type="text" name="persons" id="persons"></p>
            <p><label for="location" class="title">Your closest center:</label>
                <select class="target" name="location" id="location">
                     <option value="ny">New York</option>
                     <option value="il">Chicago</option>
                     <option value="ca">San Francisco</option>
                </select></p>
            <span class="title">Are you a member?</span>
            <label><input type="radio" name="member" value="yes" /> Yes</label>
            <label><input type="radio" name="member" value="no" /> No</label></p>
            </div>
        </fieldset>
    <div class="submit" id="myButton"><input type="button" id="btnclick" value="Register" /></div>
    </form>
    <div class="quantity"></div>
    </div>

脚本-模态窗口：

<script type="text/javascript"> //register modal window
    $(function() {
        $("#btnclick").click(function() {
            $("#divpopup").dialog({
                title: "Your Input",
                width: 500,
                height: 500,
                modal: true,
                buttons: {
                    Close:
                    function() {
                        $(this).dialog('close');
                    }
                }
            });
        });
    })
</script>

Answer 1

您要做的是将表单克隆到对话框中。 他们确认后，请重置原始表格。 像这样：

 $("#btnclick").click(function() {
    var dial = $("#myForm").clone();
    dial.dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: ['center', 'top'],
        show: 'blind',
        hide: 'blind',
        width: 400,
        dialogClass: 'ui-dialog-osx',
        buttons: {
            "Confirm": function() {
                $("#myForm").find("input").val("");
                $(this).dialog("close");
            }
        }
    });
});

http://jsfiddle.net/jessikwa/p5L20rxb/1/