【问题标题】:How to clear contents inside the Modal bootstrap如何清除模态引导程序中的内容
【发布时间】:2014-07-22 11:41:52
【问题描述】:

我遇到了一个小问题。 我想清除 modal-body 中的文本框和任何与此相关的验证,但不幸的是不成功。

 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
             <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" id="myModalLabel">Create Customer</h4>
             </div>
             <div class="modal-body">
                 <p>Please provide the details below</p>
                 <hr />
                 <div class="form-group">
                     <table class="table-responsive table-bordered table-striped"><tr><td colspan="2"><h4>Company Name</h4></td></tr>
                         <tr>
                      <td><asp:TextBox runat="server" ID="txtNewClientCompanyName" CssClass="form-control" ValidationGroup="validateNewClient" ClientIDMode="Static" Placeholder=" Vital soft"></asp:TextBox></td>
                       <td><asp:RequiredFieldValidator runat="server" ID="rfvCompany" ErrorMessage="*" Display="Dynamic" CssClass="text-danger" ValidationGroup="validateNewClient" ControlToValidate="txtNewClientCompanyName" ToolTip="Company name required" data-toggle="tooltip" data-placement="top" EnableViewState="false"></asp:RequiredFieldValidator></td>
                      </tr></table> 
                         </div>
                    <div class="form-group">
                       <table class="table-responsive table-bordered table-striped"><tr><td colspan="2"><h4>Client Email</h4></td></tr>
                          <tr>
                          <td><asp:TextBox runat="server" ID="txtEmail" CssClass="form-control" ValidationGroup="validateNewClient" ClientIDMode="Static" Placeholder=" abc@abc.com"></asp:TextBox></td>
                          <td>
                       <asp:CustomValidator ValidateEmptyText="true" ControlToValidate="txtEmail" CssClass="text-danger" Display="Dynamic" runat="server" 
                            ClientValidationFunction="ValidateEmail" ErrorMessage="*" ToolTip="Incorrect Email Address" EnableViewState="false"></asp:CustomValidator>
                        </td>
                       </tr></table> 
                       </div>
                      <div class="modal-footer">
                            <button type="button" id="btnCloseModal" class="btn btn-default" data-dismiss="modal">Close</button>
                            <asp:Button runat="server" ID="btnCreateNewClient" class="btn btn-primary" Text="Create Client" OnClick="btnCreateNewClient_Click" CausesValidation="true" ValidationGroup="validateNewClient" ></asp:Button>
                        </div>
                    </div>
                </div>
            </div>

我使用jquery函数作为

   $('.modal-body').on('hidden', function () {
       $(this).data('modal', null);
   });

任何人请!

【问题讨论】:

  • 你希望 .modal-body html 被删除或只是重置 from 和验证。
  • 您可以使用以下代码清除此模型中的所有文本框:- $('.modal-body').find("input").val("");
  • @DevendraSoni 让我试试
  • 你也可以使用$('#FormID').reset(); // #FormID - 表单中使用的id

标签: jquery twitter-bootstrap jquery-plugins modal-dialog


【解决方案1】:

更改模态标题:

$( ".modal-title" ).text("another title");

更改模态内容(如 html):

$( ".modal-body" ).html( '<a href="#">another content</a>' );

更改模态页脚:

$( ".modal-footer" ).html( '<a href="#" type="button" class="btn btn-success">click me!</a>' );

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-01-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-06-23
    • 1970-01-01
    • 2017-05-22
    相关资源
    最近更新 更多