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

A more updated answer is found below: https://stackoverflow.com/a/44391959/1004312

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>