Open a Modal from another modal and close the first (launching) modal

Question

I'm using Bootstrap Modal Window plugin its work fine but i would like to open another model window when i click next and close first one. how can i do it?

$('[data-toggle="modal"]').click(function(e) 
    {
        e.preventDefault();
        var url = $(this).attr('href');
        if (url.indexOf('#') == 0)
        {
            $(url).modal('open');
        } 
        else 
        {
            $.get(url, function(data) 
            {
                $(data).modal();
            }).success(function() { $('input:text:visible:first').focus(); });
        }
    });

<a href="next.html" data-toggle="modal">Add Record</a>

next.html File Code

<div class="modal fade" id="compose-modal" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">First Window</h4>
            </div>
            <form action="#" method="post">

                <div class="modal-footer clearfix">
                    <button type="button" data-dismiss="modal">Discard</button>

                    <button type="submit">Submit</button>
                     <a href="next2.html" data-toggle="modal" >Next</a>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

You are opening a modal from another modal and closing the first. If you're using Bootstrap 3, you can do the following:

DEMO: http://jsbin.com/venek/1/edit

In the first modal put the link to the next modal (#modal-1 & #modal-2 are example ids)

  <a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>

In the second modal put the link to the first:

  <a href="#modal-1" data-toggle="modal" data-dismiss="modal">Previous</a>

DEMO: http://jsbin.com/venek/1/edit

Answer 2

All right everybody, stand back; I've got this.

This method negates both the padding & scrolling issues present in other methods (see bottom) and is [IMO] the cleanest way to achieve the required functionality using Bootstrap Modals.

Inline

<a onclick="$('.modal-to-close').one('hidden.bs.modal', function() { $('.modal-to-open').modal('show'); }).modal('hide');">Open Modal</a>

Full Fat:

<script>
    $(function () {
        $('.selector').click(function() {
            $('.modal-to-close').one('hidden.bs.modal', function() {
                $('.modal-to-open').modal('show'); 
            }).modal('hide');
        });
    });
</script>

<a class="selector">Open Modal</a>

Beastmode:

<script>
    $(function () {
        $('[data-bm-close][data-bm-open]').on('click', function () {
            var $this = $(this);
            $($this.data('bm-close')).one('hidden.bs.modal', function () {
                $($this.data('bm-open')).modal('show');
            }).modal('hide');
        });
    });
</script>

<a data-bm-close=".modal-to-close" data-bm-open=".modal-to-open">Open Modal</a>

Tip: Unless you need to do this more than once, I recommend using the Inline version.

---

Issues present in other answers

It creates a problem, when your modal has more height than your screen. As data-dismiss="modal" removes modal-open class from body tag. so, when you scroll, modal doesn't scrolls, but the faded background starts moving. which is bad. // Deepak Yadav

Can confirm the issue reported by @Deepak. Furthermore the page will increment and enforce "padding-right" by +17px each time you open a modal from inside another (modal might need to be taller than the page for this to happen). This holds true for almost all methods on this page. See my answer for a method that avoids these issues. // Matthew Hudson

Answer 3

<a data-toggle="modal" data-target="#open1" data-dismiss="modal">OPEN 1</a>
<a data-toggle="modal" data-target="#open2" data-dismiss="modal">OPEN 2</a>

$('.modal).on('show.bs.modal',function(){
setTimeout(function(){
$('body').addClass('modal-open');
},800);
});

Answer 4

@Deepak Yadav problem: data-dismiss="modal" removes modal-open class from body tag maybe there is one solution with JS:

Add class to next-previous links

     <a class="nextStep" href="#modal-2" data-toggle="modal" data-dismiss="modal">Next</a>
     <a class="previousStep" href="#modal-1" data-toggle="modal" data-dismiss="modal">previous</a>

JS:

var $body = $('body')
  $("a.nextStep").click(function(){
   $body.addClass('modal1-on')
  });
  $("a.previousStep").click(function(){
   $body.addClass('modal2-on')
  });

  $('#modal-1').on('hidden.bs.modal', function () {
  $body.removeClass('modal2-on')
  });
  $('#modal-2').on('hidden.bs.modal', function () {
  $body.removeClass('modal1-on')
  });

Then css:

    body.modal1-on, body.modal2-on {overflow: hidden;}

Answer 5

when u close bootstrap second popup,only second close and first is open

for that we can use second popup close button on bootstrap first modal id

example

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal1" data-dismiss="modal">Close</button>

Answer 6

Here is a recipe that lets you link two modals together in a general way. The first modal has a button that launches the second modal. When the second modal is closed the first modal is reopened.

// Prevent modal on top of modal while maintaining dismissibility. 
// If a sub-modal is dismissed the original modal is reopened.
$('.modal [data-toggle="modal"]').on('click', function() {
  var curModal = $(this).closest('.modal');
  var nextModal = $($(this).attr('data-target'));

  if (curModal != nextModal) {
    curModal.modal('hide');
    nextModal.on('hide.bs.modal', function() {
      curModal.modal('show');
    });
  }
});

Note: This should only be used if you have at most 2 linked modals. Button on the second modal opening a third would cause unexpected behavior as it would close the second modal, open the third, and reopen the first as well.