Bootstrap Modal Overlay Ein weiteres Modal

Question

Nachdem ich stundenlang im Internet gesucht habe, habe ich einige Lösungen gefunden, wie ich ein neues Modal in einem anderen Modal öffnen kann. Aber meine Anforderung ist ein bisschen anders. Ich möchte ein etwas "universelles" modales Formular verwenden, das als ein Nachrichtenfeld auf meiner Seite dienen wird (nicht die gesamte Anwendung, nur für die aktuelle Seite). Dieses Meldungsfeld überlagert alle einmal aufgerufenen/angezeigten.

Zum Beispiel, öffne ich ein Modal-Formular für meine Dateneingabe, wenn ich eine Nachricht an den Benutzer senden möchte, werde ich ein anderes Modal-Formular über das Dateneingabeformular Pop.

Ich bin neu in der Webprogrammierung, also weiß ich nicht, wo mein Code falsch gelaufen ist oder fehlt mir etwas.

Hier ist der Code für meinen Designer:

<div class="modal fade" id="modAddBulletin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top: 15%;" data-keyboard="false" data-backdrop="static"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <h3 class="modal-title" id="H2"><asp:Label ID="Label3" runat="server" Text="Add Bulletin"></asp:Label></h3> 
       </div> 
       <div class="modal-body" style="padding-bottom:0px"> 
        <div="container"> 
         <div> 
         <fieldset class="form-group"> 
         <label for="txtTitle">Title</label> 
         <input id="txtTitle" runat="server" type="text" class="form-control" /> 
         </fieldset> 

         <fieldset class="form-group"> 
         <label for="txtDescription">Description</label> 
         <textarea class="form-control" runat="server" id="txtDescription" rows="6" style="min-width:568px; min-height:151px; max-width: 568px;"></textarea> 
         </fieldset> 

         <fieldset class="form-group"> 
         <asp:FileUpload ID="fleUpload" runat="server" data-filename-placement="inside" /> 
         </fieldset> 
         </div> 

        </div> 
       <div class="modal-footer">  
         <asp:LinkButton ID="btnUpload" runat="server" CssClass="btn btn-success" Width="200px"> 
         <span class="glyphicon glyphicon-cloud-upload"></span> Upload</asp:LinkButton> 

         <asp:LinkButton ID="btnCloseUpload" runat="server" CssClass="btn btn-default" Width="100px"> 
         <span class="glyphicon glyphicon-share-alt" ></span> Back</asp:LinkButton> 
       </div> 
       </div> 
       </div><!-- /.modal-content --> 
      </div><!-- /.modal-dialog --> 
     </div><!-- /.modal --> 



     <%--// For Popup Message --%> 


     <div class="modal fade" id="modalMsg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top: 30%;" data-keyboard="false" data-backdrop="static"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 

       <div class="modal-header" style="background:#4682b4; color:White;"> 
        <h4 class="modal-title">Message</h4> 
       </div> 

       <div class="modal-body"> 
        <asp:Label ID="lblErrorMsg" runat="server" Font-Names="Calibri" Font-Size="11pt"></asp:Label> 
       </div> 

      <div class="modal-footer"> 
       <asp:LinkButton ID="btnErrMsgClose" runat="server" CssClass="btn btn-primary" Width="100px" data-dismiss="modal">Close</asp:LinkButton> 
      </div> 
       </div><!-- /.modal-content --> 
      </div><!-- /.modal-dialog --> 
     </div><!-- /.modal --> 

Hier ist, wie ich sie nenne von Code-Behind:

ClientScript.RegisterStartupScript(Me.GetType(), "Show1", "<script> $('#modalMsg').modal('show');</script>") 
ClientScript.RegisterStartupScript(Me.GetType(), "Show", "<script> $('#modAddBulletin').modal('show');</script>") 

Hier ist das Ergebnis:

Danke im Voraus.

Answer 1

Sie können z-index verwenden, um Ihr Problem zu lösen.

var zIndex = 1040 + (10 * $('.modal:visible').length); 
$(this).css('z-index', zIndex); 
setTimeout(function() { 
    $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); 
}, 0); 

ONLINE DEMO