CODEWITHSUNDEEP
jquerycsstwitter-bootstrapmodal-dialog
feri baco
feri baco

Reputation: 635

Can bootstrap modal dialog overlay another dialog?

<button class="btn" onClick="$('#firstModal').modal('show');">First</button>

<!-- Modal -->
<div id="firstModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        <button class="btn" onClick="$('#secondModal').modal('show');">Second</button>
    </div>
</div>

<!-- Modal -->
<div id="secondModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
        Some error message goes here.
    </div>
</div>

Everything works fine; the only problem is that first dialog is displayed over the overlay of the second dialog. How can I fix this?

This is how it looks now: enter image description here

And I want it to look like this: enter image description here

Upvotes: 9

Views: 26722

Answers (10)

veelon
veelon

Reputation: 66

Just set the z-index of the first modal's container to 9999.

The default z-index for modals is 10000, which means the second modal will appear on top of the first. The default z-index of the fade overlay is also 9999, so as the second modal is rendered after the first, the overlay will render over the first modal.

Upvotes: 0

Muhammad Wajahat Anwar
Muhammad Wajahat Anwar

Reputation: 1065

Here is the solution that worked for me:

$("#ModalId").appendTo("body");

For the detailed answer. Check this blog post

https://weblog.west-wind.com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background

Upvotes: 0

Praveen Gaddam
Praveen Gaddam

Reputation: 123

You can simply do this way: (note : You need bootstrap 3 for this)

<button class="btn" data-target="#firstModal" data-toggle="modal">First</button>

<div id="firstModal" data-target="#secondModal" data-dismiss="modal" 
data-toggle="modal">
    <div class="modal-body">
        <button class="btn" onClick="$('#secondModal').modal('show');">Second</button>
    </div>
</div>

<div id="secondModal" >
    <div class="modal-body">
        Some error message goes here.
    </div>
</div>

Upvotes: 0

MilancheMax
MilancheMax

Reputation: 1

Let's say you have modal var modal = $('.some-selector').modal('show'); first you want to change it's zIndex like: modal.css({zIndex: 7760})

you can find reference to its $backdrop in modal.data(), so you can access it and change anything: modal.data()['bs.modal'].$backdrop.css({zIndex: 7750});

Upvotes: 0

robert
robert

Reputation: 869

I wrote a blog post about how to solve this stacking problem programatically: http://gurde.com/stacked-bootstrap-modals/

$(document)  
  .on('show.bs.modal', '.modal', function(event) {
    $(this).appendTo($('body'));
  })
  .on('shown.bs.modal', '.modal.in', function(event) {
    setModalsAndBackdropsOrder();
  })
  .on('hidden.bs.modal', '.modal', function(event) {
    setModalsAndBackdropsOrder();
  });

function setModalsAndBackdropsOrder() {  
  var modalZIndex = 1040;
  $('.modal.in').each(function(index) {
    var $modal = $(this);
    modalZIndex++;
    $modal.css('zIndex', modalZIndex);
    $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
});
  $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
}

Upvotes: 7

mr_crazy_pants
mr_crazy_pants

Reputation: 121

Just in case someone stumbles across this.

  1. Add this value to your main script tag on the your page

      var current_zindex = 1049;

  var current_zindex_bg = 1048;

  2. in your document ready function add

      $('.modal').on('show', function () {
     current_zindex++;//increment z-index for your modals
     current_zindex_bg++;//increment z-index for your modal-backdrops
     $(this).css('z-index',current_zindex); //setting the modal backdrop
 });

  3. Now in the minifield bootstrap file itself find this bit of code:

      '<div class="modal-backdrop '+r+'" />' //just search for "modal-backdrop" without the quotes

  change to:

  '<div class="modal-backdrop '+r+'"  style="z-index:'+current_zindex_bg+';" />'

That's it. You can find the same bit of code in the unminified boostrap.js by searching for "modal-backdrop" and follow the same process.

Clicking the top most backdrop will hide the top most modal as you would want.

Upvotes: 1

Alex Grande
Alex Grande

Reputation: 8027

To make overlays open other overlays, I added a simple line of JS in the event listener.

Thus any link inside an overlay will first close the overlay it is in.

Search for in the Bootstrap overlay code:

$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {

Add to that function:

$this.closest(".modal").modal('hide');

Upvotes: 0

feri baco
feri baco

Reputation: 635

I have found out that I can change z-index of the second "shadow" using this css rule:

.modal-backdrop.fade.in:nth-child(2){
    z-index: 1060 !important;
}

than I just need to set z-index of the second dialog to for example 1070 and that's it, although I am not sure about compatibility with older browsers.

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362450

I think the modal backdrop (overlay) is shared by all modals in the BODY.

But, you can use the 'show' event from the second modal to change the opacity on the first modal -- giving the effect of the overlay over the first modal:

$('#myModal2').on('show', function() {
    $('#myModal').css('opacity', .5);
});

Demo: http://bootply.com/61322

EDIT:

If you want to disable modal 1 while modal 2 is open, you can unbind modal 1 when modal 2 opens, and then restore modal 1 when modal 1 closes. I updated the Bootply for this.

$('#myModal2').on('show', function() {
    $('#myModal').css('opacity', .5);
    $('#myModal').unbind();
});
$('#myModal2').on('hidden', function() {
    $('#myModal').css('opacity', 1);
    $('#myModal').removeData("modal").modal({});
});

Upvotes: 2

major-mann
major-mann

Reputation: 2652

You could add an attribute to "secondModal"

style="z-index:100000;"

Upvotes: 1

Related Questions