Bootstrap Modal Overlay另一個Modal

搜索了幾個小時之後，我發現了一些關於如何在另一個Modal中打開一個新的Modal的解決方案。但我的要求有點不同。我想使用一個有點「通用」的模式形式，將作爲我的頁面中的消息框（不是整個應用程序，僅適用於當前頁面）。這個消息框將覆蓋所有一旦被調用/顯示。Bootstrap Modal Overlay另一個Modal

例如，我爲我的數據輸入打開一個模態窗體，如果我想向用戶提示一條消息，我會在數據輸入窗體上彈出另一個模態窗體。

我是新來的網絡編程，所以我不知道我的代碼出錯或我錯過了什麼。

下面是我的設計師代碼：

<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 -->

以下是我叫他們從後臺代碼：

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

這裏的結果：

謝謝提前。

來源

2016-06-11 Allen Binuya

您可以使用z-index來解決您的問題。

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

來源

2016-06-11 02:21:47

您好，感謝您的答覆。但我認爲它仍然需要_href_固定到表單來顯示其他模式形式。我從代碼隱藏中調用我的消息框作爲消息框。有沒有一種靈活的方式來做到這一點，而沒有直接_href_到另一種形式？ –

@CrushSundae我發現這[如何使用jQuery打開Bootstrap模式窗口？]（http://stackoverflow.com/questions/13183630/how-to-open-a-bootstrap-modal-window-using-jquery）幫你。 –

鏈接不工作的傢伙。我想要做的是覆蓋所有形式，包括以前的模態與其他模態。 –

Bootstrap Modal Overlay另一個Modal

回答

相關問題