jQuery UI 模式弹出 Window - 按钮点击

Question

我正在尝试让我的注册按钮出现在一个模态 window 中，它将显示用户信息的输入。到目前为止我有 3 个问题。

关闭模式后 window，我的表单丢失了
如果可能的话，我想将模式 window 的 "close" 按钮重命名为 "confirm"
关闭（确认）模态window后，我想回到网页，表格为空（没有之前的输入）

到目前为止我的代码：

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>

脚本 - 模态 Window :

<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/

jQuery UI 模式弹出 Window - 按钮点击

jQuery UI Modal Popup Window - Button Click

html

javascript

jquery

window

modal-dialog