Question

我＆＃39;我试图在形式窗口中将我的注册按钮放在模式窗口中，该窗口将显示用户信息的输入。到目前为止我有3个问题。

关闭模态窗口后，我的表单缺失
我想重命名＆＃34;关闭＆＃34;模态窗口的按钮到＆＃34;确认＆＃34;如果可能的话
关闭（确认）模态窗口后，我想返回网页，表格为空（没有先前的输入）

到目前为止我的代码：

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 - 模态窗口：

<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模态弹出窗口 - 按钮单击

1 个答案: