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

回答

相关问题