jQuery UI模态弹出窗口-按钮点击

jQuery UI Modal Popup Window - Button Click

本文关键字:按钮 窗口 UI 模态 jQuery      更新时间:2023-09-26

我试图有我的注册按钮在一个形式导致模态窗口,这将显示用户的信息的输入。到目前为止,我有三个问题。

  1. 关闭模态窗口后,我的表单缺失
  2. 我想把模态窗口的"关闭"按钮重命名为"确认",如果可能的话
  3. 关闭(确认)模态窗口后,我想回到网页和表单是空的(没有以前的输入)

我的代码:

HTML - Form:

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

您要做的是将表单克隆到对话框中。一旦他们确认,重置原始表单。像这样:

 $("#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/