Bootstrap模式覆盖另一个模式

Question

在网上搜索了几个小时后，我找到了一些关于如何在另一个模式中打开一个新模式的解决方案。但我的要求有点不同。我想使用一个有点“通用”的模态表单，它将在我的页面（不是整个应用程序，仅用于当前页面）中充当消息框。一旦调用/显示，此消息框将全部覆盖。

例如，我为我的数据输入打开一个模态表单，如果我想提示一条消息给用户，我会在数据输入表单上弹出另一个模态表单。

我是web编程的新手，所以我不知道我的代码哪里出了问题，或者是我遗漏了什么。

下面是我的设计器的代码：

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

结果如下：

提前谢谢你。

Answer 1

您可以使用Z索引来解决您的问题。

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

在线演示