ASP.NET Bootstrap Modal

Question

Ich bin ziemlich neu in ASP.NET, also vergib mir, wenn ich die Funktionalität falsch habe.

Ich arbeite mit Bootstrap und habe eine Schaltfläche innerhalb einer Registerkarte und UpdatePanel, die ein Modal auslöst.

Der Modal sitzt hinter dem Bildschirm und schwarz und ich kann nicht ganz herausfinden, warum.

Wenn ich das UpdatePanel heraus nehme, funktioniert es. Ich brauche das UpdatePanel, weil es in einer Registerkarte mit einer Aktion CheckBox ist, die ohne das UpdatePanel den Benutzer zurück an die erste Registerkarte sendet.

<div class="tab-pane fade" id="neworder"> 
    <asp:UpdatePanel ID="up_New_Order" runat="server"> 
     <ContentTemplate> 

      <div class="checkbox"> 
       <asp:CheckBox ID="cb_Auto_Fill" runat="server" Text="Auto fill last order" CssClass="checkbox" AutoPostBack="true" OnCheckedChanged="cb_Auto_Fill_CheckedChanged"></asp:CheckBox> 
      </div> 
      <div class="col-md-6"> 

       <!-- New Order --> 
       <asp:panel class="row form-group has-feedback" id="Panel2" runat="server"> 
        <label for="inputName" class="col-lg-4 control-label">Ordered By</label> 
        <div class="col-lg-8"> 
         <asp:Label ID="Label1" runat="server"></asp:Label> 
         <asp:TextBox CssClass="form-control" ID="tb_Ordered_By" placeholder="Customer name" runat="server"></asp:TextBox> 
        </div> 
       </asp:panel> 

       <asp:panel class="row form-group has-feedback" id="Panel5" runat="server"> 
        <label for="inputSubject" class="col-lg-4 control-label">PO No/Agency</label> 
        <div class="col-lg-8"> 
         <asp:TextBox CssClass="form-control" ID="tb_Po_Number" placeholder="PO No/Agency Ref" runat="server"></asp:TextBox> 
        </div> 
       </asp:panel> 

       <asp:panel class="row form-group has-feedback" id="Panel13" runat="server"> 
        <label for="inputSubject" class="col-lg-4 control-label">Payment Type</label> 
        <div class="col-lg-8"> 
         <asp:DropDownList ID="ddl_Payment_Type" runat="server" CssClass="form-control dropdown"></asp:DropDownList> 
        </div> 
       </asp:panel> 

       <asp:panel class="row form-group has-feedback" id="Panel14" runat="server" Visible="false"> 
        <label for="inputSubject" class="col-lg-4 control-label">Upload</label> 
        <div class="col-lg-8"> 
         <input type="file" 
           style="visibility:hidden; width: 1px;height:1px" 
           id='${multipartFilePath}' name='${multipartFilePath}' 
           onchange="$(this).parent().find('span').html($(this).val().replace('C:\\fakepath\\', ''))" /> <!-- Chrome security returns 'C:\fakepath\' --> 
         <input class="btn btn-primary" type="button" value="Upload File.." onclick="$(this).parent().find('input[type=file]').click();"/> <!-- on button click fire the file click event --> 
         &nbsp; 
         <span class="badge badge-important" ></span> 
        </div> 
       </asp:panel> 


       <asp:panel class="row form-group has-feedback" id="Panel11" runat="server"> 
        <label for="inputSubject" class="col-lg-4 control-label">Order Notes</label> 
        <div class="col-lg-8"> 
         <asp:TextBox id="tb_Order_Notes" cssClass="form-control" TextMode="multiline" Columns="50" Rows="3" runat="server" /> 
        </div> 
       </asp:panel> 

      </div> 
      <div class="col-md-6"> 

      <!-- New Order --> 
      <asp:panel class="row form-group has-feedback" id="Panel7" runat="server"> 
       <label for="inputName" class="col-lg-4 control-label">Copy Contact</label> 
       <div class="col-lg-8"> 
        <asp:Label ID="Label2" runat="server"></asp:Label> 
        <asp:TextBox CssClass="form-control" ID="tb_Copy_Contact" runat="server"></asp:TextBox> 
       </div> 
      </asp:panel> 

      <asp:panel class="row form-group has-feedback" id="Panel8" runat="server"> 
       <label for="inputName" class="col-lg-4 control-label">Copy Supply</label> 
       <div class="col-lg-8"> 
        <asp:TextBox CssClass="form-control" ID="tb_Copy_Supply" runat="server"></asp:TextBox> 
       </div> 
      </asp:panel> 

      <asp:panel class="row form-group has-feedback" id="Panel9" runat="server"> 
       <label for="inputEmail" class="col-lg-4 control-label">Copy Tel</label> 
       <div class="col-lg-8"> 
        <asp:TextBox CssClass="form-control" ID="tb_Copy_Tel" runat="server"></asp:TextBox> 
       </div> 
      </asp:panel> 

      <asp:panel class="row form-group has-feedback" id="Panel10" runat="server"> 
       <label for="inputSubject" class="col-lg-4 control-label">Copy Email</label> 
       <div class="col-lg-8"> 
        <asp:TextBox CssClass="form-control" ID="tb_Copy_Email" runat="server"></asp:TextBox> 
       </div> 
      </asp:panel> 
      <div class="row form-group"> 

      </div> 
      <div class="row form-group"> 
       <div class="col-lg-12"> 
        <asp:Button Text="Create Order" ID="btn_Create_Order" CssClass="btn btn-primary btn-block" OnClick="btn_Create_Order_Click" runat="server" /> 
       </div> 
      </div> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
</div> 

Der Modal sitzt über meinem schließenden Tag für Inhalte nur und ich nenne es mit:

protected void btn_Create_Order_Click(object sender, EventArgs e) 
{ 
    lblModalTitle.Text = "Modal Title"; 
    lblModalBody.Text = "Modal Body."; 
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$('#myModal').modal().appendTo('body');", true); 
    upModal.Update(); 

    //pnlAlertBox.Visible = true; 
} 

Hier ist die modale (ich bin wiederverwendet, so weiß ich es funktioniert).

<!-- Bootstrap Modal Dialog --> 
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional"> 
      <ContentTemplate> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
         <h4 class="modal-title"><asp:Label ID="lblModalTitle" runat="server" Text=""></asp:Label></h4> 
        </div> 
        <div class="modal-body"> 
         <asp:Label ID="lblModalBody" runat="server" Text=""></asp:Label> 
        </div> 
        <div class="modal-footer"> 
         <button class="btn btn-info" data-dismiss="modal" aria-hidden="true">Close</button> 
        </div> 
       </div> 
      </ContentTemplate> 
     </asp:UpdatePanel> 
    </div> 
</div> 

Answer 1

Ich habe versucht, Ihren Code in meinem Beispielprojekt und das Bootstrap-Modal funktioniert ordnungsgemäß. Ich benutze jquery 2.1.3

Es könnte sein, dass die jquery-Version, die Sie verwenden, das Problem verursacht.