Bootstrap Modal Overlay Another Modal

Question

After searching the web for hours, I found some solutions regarding on how I can open a new Modal inside another Modal. But my requirement is kinda different. I want to use a somewhat "universal" modal form that will serve as a message box in my page (not the whole application, for the current page only). This message box will overlay all once being called/shown.

For example, I open a Modal form for my data entry, if I want to prompt a message to the user, I will pop another Modal form over the data entry form.

I am new to web programming so I don't know where my code went wrong or am I missing something.

Here's the code for my 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 -->

Here's how I call them from code-behind:

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

Here's the result:

Thank you in advance.

Answer 1

You can use z-index to solve your problem.

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