Is there a way to pop up a modal window on top of another?

Question

I'm making an application form that's on a modal and I made it so the user can upload their picture on the application form. So I have my thumbnail with a "upload picture" bubble inside it, and when I click it, a modal pops up. However the problem is when I click on "cancel" or "upload" on my "upload picture" modal, it closes both modal windows (application form and upload picture).

I'm using bootstrap and here's a snippet of my code:

<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">Application Form</h4>
        </div>

     <!-- START OF MODAL BODY-->

        <div class="modal-body">          
            <div class="col-sm-5">
                <div class="thumbnail">
                    <div class="avatar">
                        <a href="#" class="thumbnail bottom-15" data-toggle="modal" data-target="#upload-avatar">
                            <img src="img/face1.jpg" alt="...">
                        </a>
      <!-- Upload new avatar bubble -->
                        <div class="avatar-bubble">
                            <a href="#" data-toggle="modal" data-target="#upload-avatar"><i class="fa fa-plus"></i> Upload new avatar</a>
                        </div>
                    </div>
                </div>
            </div>
            <!--Modal for uploading photo-->
            <div class="modal fade" id="upload-avatar" tabindex="-1" role="dialog" aria-labelledby="upload-avatar-title" aria-hidden="true" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="upload-avatar-title">Upload new avatar</h4>
                        </div>
                        <div class="modal-body">
                            <p>Please choose a file to upload. JPG, PNG, GIF only.</p>
                                <form role="form">
                                    <div class="form-group">
                                        <label for="file">File input</label>
                                        <input type="file" id="file">
                                        <p class="help-block">Files up to 5Mb only.</p>
                                    </div>
                                    <button type="button" class="hl-btn hl-btn-default" data-dismiss="modal">Cancel</button>
                                    <button type="button" class="hl-btn hl-btn-green" data-dismiss="modal">Upload</button>
                                </form>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
        </div>  <!-- END OF APPLICATION FORM MODAL BODY -->

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Basically I put my second modal within my first modal.

According to the BS 3 docs: "Overlapping modals are not supported. Be sure note to open a modal while another one is visible.." http://getbootstrap.com/javascript/#modals — Carol Skelly, Jan 24 '14 at 10:25
Possible duplicate of [Multiple modals overlay](https://stackoverflow.com/questions/19305821/multiple-modals-overlay) — Emile Bergeron, Apr 19 '18 at 15:00

score 0 · Answer 1 · answered Jan 24 '14 at 10:36

Although the Bootstrap 3 docs say "Overlapping modals are not supported..", I think I found a workaround that works. You need to..

Make sure your 2nd modal's markup is outside the body of the 1st modal
Manually close the 2nd modal by using the Bootstrap modal toggle method in jQuery.
Change the z-index of the 2nd modal so that it appears over the first.

http://bootply.com/108243

Also, I changed your markup to remove the fade and `display:none'.

score 0 · Answer 2 · answered Jan 24 '14 at 22:27

I've opened a modal from another modal. I call it 'modalception'. It sounds like you just need to make sure your events are targeting the correct modal.

I have overlapping modals, and they work as expected. Clicking the background of the second modal closes that modal only, not the one behind it.

score 0 · Answer 3 · answered Feb 27 '15 at 19:34

Just set the z-index correctly. Be sure not to nest them, and it should work just fine. It is not "supported", but I do it all the time. A project I am currently working on stacks 3 on top of each other with no problems.

I am using Bootstrap v3.3.2 and jQuery 1.11.2.

Is there a way to pop up a modal window on top of another?

3 Answers3