Question

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

例如，我为我的数据输入打开了一个Modal表单，如果我想向用户提示一条消息，我将在数据输入表单上弹出另一个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>")

结果如下：

提前谢谢。

Answer 1

您可以使用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

Bootstrap模态覆盖另一个模态

1 个答案: