引导模式不能正常工作

Question

我正在使用bootstrap模式的评论/反馈表单之一，它有时工作，有时它只显示黑色覆盖&没有模式。

不确定哪里错了，因为我在控制台也没有得到任何错误。

我面临着两个问题，当它工作时，当我单击保存按钮而没有保存或验证时，它就会关闭表单。

我现在面临的第二个问题是，当我单击按钮/链接打开模式时，它只显示黑色覆盖，而没有模式窗口

<a id="btnPostComment" class="btn btn-com-po" >POST COMMENT</a>

​

$(window).load(function() {

  $("#btnPostComment").click(function() {
    $("#modalPostComment").modal({
      backdrop: 'static',
      keyboard: false
    });
  });

});

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalPostComment">

  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>

        <h3 class="category-headding ">POST A COMMENT</h3>
      </div>
      <div class="modal-body" style="padding:25px;">

        <asp:UpdatePanel ID="updPanelForm" runat="server" UpdateMode="Conditional">
          <ContentTemplate>

            <asp:Panel ID="pnlForm" runat="server">

              <div class="row">
                <div class="col-sm-12">

                  <p>[*] required field.</p>
                  <asp:ValidationSummary ID="vsCommentForm" runat="server" CssClass="validation-sum" ValidationGroup="vgCommentForm" />
                  <asp:RequiredFieldValidator ID="rfvFullName" runat="server" ErrorMessage="Name field can't be left blank" CssClass="css-validator" ControlToValidate="txtFullName" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
                  <asp:RequiredFieldValidator ID="rfvtxtEmail" runat="server" ErrorMessage="Email field can't be left blank" CssClass="css-validator" ControlToValidate="txtEmail" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
                  <asp:RegularExpressionValidator ID="rfevtxtEmail" runat="server" ErrorMessage="Enter correct email" ControlToValidate="txtEmail" CssClass="css-validator" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="vgCommentForm"></asp:RegularExpressionValidator>
                  <asp:RequiredFieldValidator ID="rfvddlCountry" runat="server" InitialValue="0" ErrorMessage="Select Country" CssClass="css-validator" ControlToValidate="ddCountry" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
                  <asp:RequiredFieldValidator ID="rfMessage" runat="server" ErrorMessage="Message field can't be left blank" CssClass="css-validator" ControlToValidate="txtMessage" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>

                  <asp:TextBox ID="txtValidate" CssClass="hidden" runat="server"></asp:TextBox>

                </div>
                <div class="col-sm-12">
                  <span class="input">
                                    <asp:TextBox ID="txtFullName" CssClass="input_field" runat="server"></asp:TextBox>
                                    <label class="input_label" for="input-1">
                                        <span class="input_label_content" data-content="Full Name">Full Name *</span>
                  </label>
                  </span>
                </div>
                <div class="col-sm-12">
                  <span class="input">
                                    <asp:TextBox ID="txtEmail" CssClass="input_field" runat="server"></asp:TextBox>
    
                                    <label class="input_label" for="input-2">
                                        <span class="input_label_content" data-content="Email Address">Email Address *</span>
                  </label>
                  </span>
                </div>


                <div class="col-sm-12">
                  <span class="input">
                                    <asp:TextBox ID="txtMessage" runat="server" CssClass="input_field" TextMode="MultiLine" MaxLength="10" TabIndex="4"></asp:TextBox>
                                    <label class="input_label" for="message">
                                        <span class="input_label_content" data-content="Your Email">Your Message *</span>
                  </label>
                  </span>

                </div>


                <div class="col-sm-12">
                  <asp:Button ID="btnSaveComment" CssClass="btn btn-stylex" runat="server" Text="Post Your Comment" CausesValidation="true" ValidationGroup="vgCommentForm" UseSubmitBehavior="False" OnClientClick="ValidateCommentForm(this);" OnClick="btnSaveComment_Click"
                  />
                </div>
              </div>


            </asp:Panel>
            <asp:Panel ID="pnlMessage" runat="server" Visible="false">
              <asp:Label ID="lblSuccess" CssClass="lbl-com-success" runat="server" Text="Comment posted"></asp:Label>
            </asp:Panel>

          </ContentTemplate>
        </asp:UpdatePanel>



      </div>

    </div>

  </div>
</div>

​

Answer 1

Try this

为了一个小小的解释？我认为这可能是因为jQuery直到后来才被加载。我已经看过解决办法，但我想了解一下，以防我再次遇到这种情况