Bootstrap Modal Overlay Another Modal
<p>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.</p>

<p>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.</p>

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

<p>Here's the code for my Designer:</p>

<pre><code>&lt;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"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                    &lt;h3 class="modal-title" id="H2"&gt;&lt;asp:Label ID="Label3" runat="server" Text="Add Bulletin"&gt;&lt;/asp:Label&gt;&lt;/h3&gt;
                &lt;/div&gt;
                &lt;div class="modal-body" style="padding-bottom:0px"&gt;
                    &lt;div="container"&gt;
                      &lt;div&gt;
                      &lt;fieldset class="form-group"&gt;
                        &lt;label for="txtTitle"&gt;Title&lt;/label&gt;
                        &lt;input id="txtTitle" runat="server" type="text" class="form-control"  /&gt;
                      &lt;/fieldset&gt;

                      &lt;fieldset class="form-group"&gt;
                        &lt;label for="txtDescription"&gt;Description&lt;/label&gt;
                        &lt;textarea class="form-control" runat="server" id="txtDescription" rows="6" style="min-width:568px; min-height:151px; max-width: 568px;"&gt;&lt;/textarea&gt;
                      &lt;/fieldset&gt;

                      &lt;fieldset class="form-group"&gt;
                      &lt;asp:FileUpload ID="fleUpload" runat="server" data-filename-placement="inside" /&gt;
                      &lt;/fieldset&gt;
                      &lt;/div&gt;

                   &lt;/div&gt;
                &lt;div class="modal-footer"&gt;    
                        &lt;asp:LinkButton ID="btnUpload" runat="server" CssClass="btn btn-success" Width="200px"&gt;
                        &lt;span class="glyphicon glyphicon-cloud-upload"&gt;&lt;/span&gt; Upload&lt;/asp:LinkButton&gt;

                        &lt;asp:LinkButton ID="btnCloseUpload" runat="server" CssClass="btn btn-default" Width="100px"&gt; 
                        &lt;span class="glyphicon glyphicon-share-alt" &gt;&lt;/span&gt; Back&lt;/asp:LinkButton&gt;
                &lt;/div&gt;
                &lt;/div&gt;
                &lt;/div&gt;&lt;!-- /.modal-content --&gt;
            &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
        &lt;/div&gt;&lt;!-- /.modal --&gt;



        &lt;%--// For Popup Message --%&gt;


       &lt;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"&gt;
        &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;

                &lt;div class="modal-header" style="background:#4682b4; color:White;"&gt;
                    &lt;h4 class="modal-title"&gt;Message&lt;/h4&gt;
                &lt;/div&gt;

                &lt;div class="modal-body"&gt;
                    &lt;asp:Label ID="lblErrorMsg" runat="server" Font-Names="Calibri" Font-Size="11pt"&gt;&lt;/asp:Label&gt;
                &lt;/div&gt;

            &lt;div class="modal-footer"&gt;
               &lt;asp:LinkButton ID="btnErrMsgClose" runat="server" CssClass="btn btn-primary" Width="100px" data-dismiss="modal"&gt;Close&lt;/asp:LinkButton&gt;
            &lt;/div&gt;
                &lt;/div&gt;&lt;!-- /.modal-content --&gt;
            &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
        &lt;/div&gt;&lt;!-- /.modal --&gt;
</code></pre>

<p>Here's how I call them from code-behind:</p>

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

<p>Here's the result:</p>

<p><a href="https://i.stack.imgur.com/81a5e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/81a5e.png" alt="FFFFFFF.."></a></p>

<p>Thank you in advance.</p>