模态弹出窗口不清除字段

Question

我使用了 Twitter Bootstrap 模态弹出窗口作为表单。我有两个按钮，一个是提交和关闭。如果我单击关闭按钮或弹出窗口顶部的 'x' 按钮正在关闭，但如果我再次打开，字段不会像

中那样清除

  <asp:Button ID="btnShowModal" runat="server" Text="+" CssClass="btn btn-primary btn-info " data-target="#pnlModal1" data-toggle="modal"  OnClientClick="javascript:return false;" />
        <div id="pnlModal1" role="dialog" tabindex="-1" class="modal fade">
                            <div class="modal-dialog">
                                <div id="Div1" class="modal-content" runat="server">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal">
                                            <span aria-hidden="true">&times;</span>
                                            <span class="sr-only">Close</span>
                                        </button>
                                        <h4 class="modal-title">Bank Details</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="row-fluid">
                                            <div class="myform">
                                                <table class="table table-bordered table-hover">
                                                    <tr>
                                                        <td>Bank Name : </td>
                                                        <td>
                                                            <asp:TextBox ID="txtBankName" runat="server" ></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rfvBankName" runat="server" ValidationGroup="savebankdet" ControlToValidate="txtBankName" ErrorMessage="The Field is Required*" ForeColor="Red"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Account Name:</td>
                                                        <td class="aa" >
                                                            <asp:TextBox ID="txtAccName" runat="server" ></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rfvAccName" runat="server" ValidationGroup="savebankdet" ControlToValidate="txtAccName" ErrorMessage="The Field is Required*" ForeColor="Red"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Account Number:</td>

                                                        <td>
                                                            <asp:TextBox ID="txtAccNo" runat="server"></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rfvAccNo" runat="server" ValidationGroup="savebankdet" ControlToValidate="txtAccNo" ErrorMessage="The Field is Required*" ForeColor="Red"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>Country:</td>
                                                        <td>
                                                            <asp:TextBox ID="txtCountry" runat="server"></asp:TextBox>
                                                            <asp:RequiredFieldValidator ID="rfvCountry" runat="server" ValidationGroup="savebankdet" ControlToValidate="txtCountry" ErrorMessage="The Field is Required*" ForeColor="Red"></asp:RequiredFieldValidator>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                            <div class="modal-footer">
                                                <asp:Button ID="btnAddBankAccount" runat="server" Text="Add" CssClass="btn btn-info" UseSubmitBehavior="false" ValidationGroup="savebankdet" OnClick="btnAddBankRecord_Click" />
                                                <button class="btn btn-info" id="btnbnkclose" data-dismiss="modal"  aria-hidden="true">Close</button>
                                            </div>


  </div>

Answer 1

你应该像这样使用 aomethind：

 $('#myModal').on('hidden.bs.modal', function () {
      $(this).removeData('bs.modal');
    });

Answer 2

要重置您的 Bootstrap 模式，您可以这样做 JS

$('.modal').on('hidden.bs.modal',function(){
   $(this).find('form')[0].reset(); /*Or reset your field with .val(' ') and .text(' ')*/
});

Answer 3

显示弹出窗口时，您必须清除 bootstrap 模式中的所有表单字段

$('#myModal').on('shown.bs.modal', function () {$('#myform')[0].reset(); })

由于您的代码没有显示表单标签，您必须通过如下脚本清除每个输入元素 $('#myModal').on('shown.bs.modal', function () {$('input [type="text"]').val("");})

Answer 4

http://getbootstrap.com/javascript/#modals 显示隐藏模态时的事件。只需利用它：

$('#modal1').on('hidden.bs.modal', function (e) {
  $(this)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/5LCSU/

我会建议以上内容，因为它将清除绑定到模式本身而不是关闭按钮，但我意识到这不能解决您的具体问题。您可以使用绑定到关闭按钮的相同清除逻辑：

$('[data-dismiss=modal]').on('click', function (e) {
    var $t = $(this),
        target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];

  $(target)
    .find("input,textarea,select")
       .val('')
       .end()
    .find("input[type=checkbox], input[type=radio]")
       .prop("checked", "")
       .end();
})

http://jsfiddle.net/jFyH2/

Answer 5

尝试在 aspx

<script>
function ModalClose() {
     $("#PanelModal").modal('hide');
}
</script>
<asp:Button runat="server" CssClass="btn btn-warning" Text="Close" ID="ButtonClose" OnClick="ButtonClose_Click" />

在aspx.cs

protected void ButtonClose_Click(object sender, EventArgs e)
{
     txtBankName.Text = "";
     ClientScript.RegisterStartupScript(this.GetType(), "close", "ModalClose()", true);
}

这可以在没有动画的情况下使用

模态弹出窗口不清除字段

Modal Popup not clearing the fields

c#

asp.net

modalpopup

bootstrap-modal