[javascript] Bootstrap: Open Another Modal in Modal

So, I'm using this code to open another modal window in a current opened modal window:

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

What happens is, that for like 500ms the scrollbar will duplicate. I guess because the current modal is still fading out. However it looks very un-smooth and stuttering.

I would appreciate any suggestions to solve this issue.

Also, is the way building this in an onclick-event unprofessional?

I'm working with the bootstrap version 3.0.

Edit: I guess it's neccesary to reduce the time of fading out a modal. How is this possible?

This thread is old, but for those who come from google, Ive come with a solutions that is hybrid from all the answers Ive found on the net.

This will make sure level class is being added:

$(document).on('show.bs.modal', '.modal', function (event) {
  $(this).addClass(`modal-level-${$('.modal:visible').length}`);
});

Inside my SCSS Ive wrote a rule that supports main modal and 10 on top (10 because from z-index: 1060 popover takes place), you can add levels count inside _variables.scss if you want:

@for $level from 0 through 10 {
  .modal-level-#{$level} {
    z-index: $zindex-modal + $level;

    & + .modal-backdrop {
      z-index: $zindex-modal + $level - 1;
    }
  }
}

Do not forget that you cannot have modal inside modal as their controls will be messed up. In my case all my modals were at the end of body.

And finally as members below also mentions this, after closing one modal, you need to keep modal-open class on body:

$(document).on('hidden.bs.modal', function (e) {
  if ($('.modal:visible').length > 0) {
    $('body').addClass('modal-open');
  }
});

The answer given by H Dog is great, but this approach was actually giving me some modal flicker in Internet Explorer 11. Bootstrap will first hide the modal removing the 'modal-open' class, and then (using H Dogs solution) we add the 'modal-open' class again. I suspect this is somehow causing the flicker I was seeing, maybe due to some slow HTML/CSS rendering.

Another solution is to prevent bootstrap in removing the 'modal-open' class from the body element in the first place. Using Bootstrap 3.3.7, this override of the internal hideModal function works perfectly for me.

$.fn.modal.Constructor.prototype.hideModal = function () {
    var that = this
    this.$element.hide()
    this.backdrop(function () {
        if ($(".modal:visible").length === 0) {
            that.$body.removeClass('modal-open')
        }
        that.resetAdjustments()
        that.resetScrollbar()
        that.$element.trigger('hidden.bs.modal')
    })
}

In this override, the 'modal-open' class is only removed when there are no visible modals on the screen. And you prevent one frame of removing and adding a class to the body element.

Just include the override after bootstrap have been loaded.

Close the first Bootstrap modal and open the new modal dynamically.

$('#Modal_One').modal('hide');
setTimeout(function () {
  $('#Modal_New').modal({
    backdrop: 'dynamic',
    keyboard: true
  });
}, 500);

try this:

$('.modal').on('hidden.bs.modal', function () {
//If there are any visible
  if($(".modal:visible").length > 0) {
      //Slap the class on it (wait a moment for things to settle)
      setTimeout(function() {
          $('body').addClass('modal-open');
      },100)
  }
});

Why not just change the content of the modal body?

    window.switchContent = function(myFile){
        $('.modal-body').load(myFile);
    };

In the modal just put a link or a button

    <a href="Javascript: switchContent('myFile.html'); return false;">
     click here to load another file</a>

If you just want to switch beetween 2 modals:

    window.switchModal = function(){
        $('#myModal-1').modal('hide');
        setTimeout(function(){ $('#myModal-2').modal(); }, 500);
        // the setTimeout avoid all problems with scrollbars
    };

In the modal just put a link or a button

    <a href="Javascript: switchModal(); return false;">
     click here to switch to the second modal</a>

To open another modal window in a current opened modal window,
you can use bootstrap-modal

bootstrap-modal DEMO

Try this:

// Hide the login modal
$('#login').modal('hide');

// Show the next modal after the fade effect is finished
setTimeout(function(){ $('#lost').modal('show'); }, 500);

This simple hack works for me.

You can actually detect when the old modal closes by calling the hidden.bs.modal event:

    $('.yourButton').click(function(e){
        e.preventDefault();

        $('#yourFirstModal')
            .modal('hide')
            .on('hidden.bs.modal', function (e) {
                $('#yourSecondModal').modal('show');

                $(this).off('hidden.bs.modal'); // Remove the 'on' event binding
            });

    });

For more info: http://getbootstrap.com/javascript/#modals-events

For bootstrap 4, to expand on @helloroy's answer I used the following;-

var modal_lv = 0 ;
$('body').on('shown.bs.modal', function(e) {
    if ( modal_lv > 0 )
    {
        $('.modal-backdrop:last').css('zIndex',1050+modal_lv) ;
        $(e.target).css('zIndex',1051+modal_lv) ;
    }
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

The advantage of the above is that it won't have any effect when there is only one modal, it only kicks in for multiples. Secondly, it delegates the handling to the body to ensure future modals which are not currently generated are still catered for.

Update

Moving to a js/css combined solution improves the look - the fade animation continues to work on the backdrop;-

var modal_lv = 0 ;
$('body').on('show.bs.modal', function(e) {
    if ( modal_lv > 0 )
        $(e.target).css('zIndex',1051+modal_lv) ;
    modal_lv++ ;
}).on('hidden.bs.modal', function() {
    if ( modal_lv > 0 )
        modal_lv-- ;
});

combined with the following css;-

.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1052 ;
}
.modal-backdrop ~ .modal-backdrop ~ .modal-backdrop ~ .modal-backdrop
{
    z-index : 1053 ;
}

This will handle modals nested up to 4 deep which is more than I need.

My code works well using data-dismiss.

<li class="step1">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox1">
        <p class="text-label">Step 1</p>
        <p class="text-text">Plan your Regime</p>
    </a>

</li>
<li class="step2">
    <a href="#" class="button-popup" data-dismiss="modal" data-toggle="modal" data-target="#lightbox2">
        <p class="text-label">Step 2</p>
        <p class="text-text">Plan your menu</p>
    </a>
</li>
<li class="step3 active">
    <a href="#" class="button-popup" data-toggle="modal" data-dismiss="modal" data-target="#lightbox3">
        <p class="text-label">Step 3</p>
        <p class="text-text">This Step is Undone.</p>
    </a>
</li>

I also had some trouble with my scrollable modals, so I did something like this:

  $('.modal').on('shown.bs.modal', function () {
    $('body').addClass('modal-open');
    // BS adds some padding-right to acomodate the scrollbar at right
    $('body').removeAttr('style');
  })

  $(".modal [data-toggle='modal']").click(function(){
    $(this).closest(".modal").modal('hide');
  });

It will serve for any modal whithin a modal that comes to appear. Note that the first its closed so the second can appear. No changes in the Bootstrap structure.

I went kind of a different route all together, I decided to "De-Nest" them. Maybe someone will find this handy...

var $m1 = $('#Modal1');
var $innermodal = $m1.find(".modal");     //get reference to nested modal
$m1.after($innermodal);                  // snatch it out of inner modal and put it after.

Modals in Modal:

$('.modal-child').on('show.bs.modal', function () {_x000D_
    var modalParent = $(this).attr('data-modal-parent');_x000D_
    $(modalParent).css('opacity', 0);_x000D_
});_x000D_
 _x000D_
$('.modal-child').on('hidden.bs.modal', function () {_x000D_
    var modalParent = $(this).attr('data-modal-parent');_x000D_
    $(modalParent).css('opacity', 1);_x000D_
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
_x000D_
<a href="#myModal" role="button" class="btn btn-primary" data-toggle="modal">Modals in Modal</a>_x000D_
_x000D_
_x000D_
<div id="myModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">_x000D_
    <div class="modal-dialog">_x000D_
        <!-- Modal content-->_x000D_
        <div class="modal-content">_x000D_
            <div class="modal-header">_x000D_
             _x000D_
                <button type="button" class="close" data-dismiss="modal">&times;</button>_x000D_
                <h4 class="modal-title">Modal Header</h4>_x000D_
            </div>_x000D_
            <div class="modal-body">_x000D_
                <a href="#myModal1" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 1</a>_x000D_
                <a href="#myModal2" role="button" class="btn btn-primary" data-toggle="modal">Launch other modal 2</a>_x000D_
            </div>_x000D_
_x000D_
        </div>_x000D_
    </div>_x000D_
</div>_x000D_
_x000D_
<div id="myModal1" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">_x000D_
    <div class="modal-dialog">_x000D_
        <!-- Modal content-->_x000D_
        <div class="modal-content">_x000D_
            <div class="modal-header">_x000D_
                <button type="button" class="close" data-dismiss="modal">&times;</button>_x000D_
                <h4 class="modal-title">Modal Header 1</h4>_x000D_
            </div>_x000D_
            <div class="modal-body">_x000D_
                <p>Two modal body…1</p>_x000D_
            </div>_x000D_
            <div class="modal-footer">_x000D_
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>_x000D_
            </div>_x000D_
_x000D_
        </div>_x000D_
    </div>_x000D_
</div>_x000D_
_x000D_
<div id="myModal2" class="modal modal-child" data-backdrop-limit="1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-modal-parent="#myModal">_x000D_
    <div class="modal-dialog">_x000D_
        <!-- Modal content-->_x000D_
        <div class="modal-content">_x000D_
            <div class="modal-header">_x000D_
                _x000D_
                <button type="button" class="close" data-dismiss="modal">&times;</button>_x000D_
                <h4 class="modal-title">Modal Header 2</h4>_x000D_
            </div>_x000D_
            <div class="modal-body">_x000D_
                <p>Modal body…2</p>_x000D_
            </div>_x000D_
            <div class="modal-footer">_x000D_
                <button class="btn btn-default" data-dismiss="modal" data-dismiss="modal" aria-hidden="true">Cancel</button>_x000D_
            </div>_x000D_
_x000D_
        </div>_x000D_
    </div>_x000D_
</div>

Twitter docs says custom code is required...

This works with no extra JavaScript, though, custom CSS would be highly recommended...

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>_x000D_
<!-- Button trigger modal -->_x000D_
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalOneModal">_x000D_
      Launch demo modal_x000D_
    </button> _x000D_
            <!-- Modal -->_x000D_
            <div class="modal fade bg-info" id="modalOneModal" tabindex="-1" role="dialog" aria-labelledby="modalOneLabel" aria-hidden="true">_x000D_
    _x000D_
              <div class="modal-dialog">_x000D_
          _x000D_
                <div class="modal-content  bg-info">_x000D_
                  <div class="modal-header btn-info">_x000D_
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>_x000D_
                    <h4 class="modal-title" id="modalOneLabel">modalOne</h4>_x000D_
                  </div>_x000D_
                  <div id="thismodalOne" class="modal-body bg-info">_x000D_
                _x000D_
                _x000D_
              <!-- Button trigger modal -->_x000D_
    <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#twoModalsExample">_x000D_
      Launch demo modal_x000D_
    </button>_x000D_
             _x000D_
                    <div class="modal fade bg-info" id="twoModalsExample" style="overflow:auto" tabindex="-1" role="dialog" aria-hidden="true">_x000D_
                <h3>EXAMPLE</h3>_x000D_
            </div>_x000D_
                  </div>_x000D_
                  <div class="modal-footer btn-info" id="woModalFoot">_x000D_
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>_x000D_
                  </div>_x000D_
                </div>_x000D_
              </div>_x000D_
            </div>_x000D_
    <!-- End Form Modals -->

try this

<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
  <title></title>_x000D_
  <meta charset="utf-8">_x000D_
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">_x000D_
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>_x000D_
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#test1">Open Modal 1 </button>_x000D_
_x000D_
_x000D_
_x000D_
<div id="test1" class="modal fade" role="dialog" style="z-index: 1400;">_x000D_
  <div class="modal-dialog">_x000D_
    <!-- Modal content-->_x000D_
    <div class="modal-content">_x000D_
      _x000D_
      <div class="modal-body">_x000D_
       <button type="button" class="btn btn-info btn-lg" data-toggle="modal"      data-target="#test2">Open Modal 2</button>_x000D_
       _x000D_
      </div>      _x000D_
    </div>_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
<div id="test2" class="modal fade" role="dialog" style="z-index: 1600;">_x000D_
  <div class="modal-dialog">_x000D_
    <!-- Modal content-->_x000D_
    <div class="modal-content">_x000D_
      _x000D_
      <div class="modal-body">_x000D_
       _x000D_
        content_x000D_
       _x000D_
      </div>      _x000D_
    </div>_x000D_
  </div>_x000D_
</div>_x000D_
  _x000D_
_x000D_
</body>_x000D_
</html>

For someone who use bootstrap 4 https://jsfiddle.net/helloroy/tmm9juoh/

var modal_lv = 0;_x000D_
$('.modal').on('shown.bs.modal', function (e) {_x000D_
    $('.modal-backdrop:last').css('zIndex',1051+modal_lv);_x000D_
    $(e.currentTarget).css('zIndex',1052+modal_lv);_x000D_
    modal_lv++_x000D_
});_x000D_
_x000D_
$('.modal').on('hidden.bs.modal', function (e) {_x000D_
    modal_lv--_x000D_
});

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-a">_x000D_
  Launch demo modal a_x000D_
</button>_x000D_
_x000D_
<div class="modal fade" id="modal-a" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">_x000D_
  <div class="modal-dialog" role="document">_x000D_
    <div class="modal-content">_x000D_
      <div class="modal-header">_x000D_
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>_x000D_
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">_x000D_
          <span aria-hidden="true">&times;</span>_x000D_
        </button>_x000D_
      </div>_x000D_
      <div class="modal-body">_x000D_
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-b">_x000D_
  Launch another demo modal b_x000D_
</button>_x000D_
<p class="my-3">_x000D_
Not good for fade In._x000D_
</p>_x000D_
<p class="my-3">_x000D_
who help to improve?_x000D_
</p>_x000D_
      </div>_x000D_
      <div class="modal-footer">_x000D_
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>_x000D_
        <button type="button" class="btn btn-primary">Save changes</button>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
<div class="modal fade" id="modal-b" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">_x000D_
  <div class="modal-dialog" role="document">_x000D_
    <div class="modal-content">_x000D_
      <div class="modal-header">_x000D_
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>_x000D_
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">_x000D_
          <span aria-hidden="true">&times;</span>_x000D_
        </button>_x000D_
      </div>_x000D_
      <div class="modal-body">_x000D_
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-c">_x000D_
  Launch another demo modal c_x000D_
</button>_x000D_
<p class="my-3">_x000D_
But good enough for static modal_x000D_
</p>_x000D_
      </div>_x000D_
      <div class="modal-footer">_x000D_
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>_x000D_
        <button type="button" class="btn btn-primary">Save changes</button>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
_x000D_
<div class="modal" id="modal-c" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">_x000D_
  <div class="modal-dialog" role="document">_x000D_
    <div class="modal-content">_x000D_
      <div class="modal-header">_x000D_
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>_x000D_
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">_x000D_
          <span aria-hidden="true">&times;</span>_x000D_
        </button>_x000D_
      </div>_x000D_
      <div class="modal-body">_x000D_
<p class="my-3">That's all.</p>_x000D_
      </div>_x000D_
      <div class="modal-footer">_x000D_
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>_x000D_
        <button type="button" class="btn btn-primary">Save changes</button>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>

My solution does not close the lower modal, but truly stacks on top of it. It preserves scrolling behavior correctly. Tested in Bootstrap 3. For modals to stack as expected, you need to have them ordered in your Html markup from lowest to highest.

$(document).on('hidden.bs.modal', function (event) {_x000D_
  if ($('.modal:visible').length) {_x000D_
    $('body').addClass('modal-open');_x000D_
  }_x000D_
});

UPDATE: When you have stacked modals, all the backdrops appear below the lowermost modal. You can fix that by adding the following CSS:

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

This will give the appearance of a modal backdrop below the topmost visible modal. That way it grays out your lower modals underneath.

Update for 2019 -- Using Bootstrap 4

I found most of the answers seem to have a lot of unnecessary jQuery. To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show.bs.modal. You may also want some CSS to handle the backdrop overlays. Here are the 3 open modal from another scenarios...

Open modal from another modal (keep 1st modal open)

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>

<div class="modal" id="myModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Modal title</h4>    
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ...
              <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Open modal2</a>
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
          </div>
        </div>
</div>
<div class="modal" id="myModal2" data-backdrop="static">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">2nd Modal title</h4>
              <button type="button" class="close" data-dismiss="modal">×</button>
            </div><div class="container"></div>
            <div class="modal-body">
              ..
            </div>
            <div class="modal-footer">
              <a href="#" data-dismiss="modal" class="btn">Close</a>
              <a href="#" class="btn btn-primary">Save changes</a>
            </div>
          </div>
        </div>
</div>

A potential issue in this case is that the backdrop from the 2nd modal hides the 1st modal. To prevent this, make the 2nd modal data-backdrop="static", and add some CSS to fix the z-indexes of the backdrops...

/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}

https://www.codeply.com/go/NiFzSCukVl

Open modal from another modal (close 1st modal)

This is similar to the above scenario, but since we are closing the 1st modal when the 2nd is opened, there is no need for the backdrop CSS fix. A simple function that handles the 2nd modals show.bs.modal event closes the 1st modal.

$("#myModal2").on('show.bs.modal', function (e) {
    $("#myModal1").modal("hide");
});

https://codeply.com/go/ejaUJ4YANz

Open modal inside another modal

The last multiple modals scenario is opening the 2nd modal inside the 1st modal. In this case the markup for the 2nd is placed inside the 1st. No extra CSS or jQuery is needed.

<div class="modal" id="myModal1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Modal title</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="container"></div>
            <div class="modal-body">
                ...
                <a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal 2</a>
            </div>
            <div class="modal-footer">
                <a href="#" data-dismiss="modal" class="btn">Close</a>
            </div>
        </div>
    </div>

    <div class="modal" id="myModal2">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">2nd Modal title</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="container"></div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <a href="#" data-dismiss="modal" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/iSbjqubiyn

Working on a project that has a lot of modals calling other modals and a few HTML guys that might not know to initiate it everytime for each button. Came to a similar conclusion as @gmaggio, begrudgingly after going the long way around first.

EDIT: Now supports modals called via javascript.

EDIT: Opening a scrolling modal from another modal now works.

$(document).on('show.bs.modal', function (event) {
    if (!event.relatedTarget) {
        $('.modal').not(event.target).modal('hide');
    };
    if ($(event.relatedTarget).parents('.modal').length > 0) {
        $(event.relatedTarget).parents('.modal').modal('hide');
    };
});

$(document).on('shown.bs.modal', function (event) {
    if ($('body').hasClass('modal-open') == false) {
        $('body').addClass('modal-open');
    };
});

Just place the modal calling button in as normal, and if it is picked up to be inside a modal, it will close the current one first before opening the one specified in data-target. Note that relatedTarget is provided by Bootstrap.

I also added the following to smooth out the fading a bit: I am sure more can be done though.

.modal-backdrop.fade + .modal-backdrop.fade {
    transition: opacity 0.40s linear 0s;
}