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>

Ulna

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

Nika

Thanks for help me out @BootstrapThemer its working well but its not working on external file – Ulna

There are no instructions that I found about opening a remote modal within another modal, but you can probably find something to help you here: #18379220. – Nika

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. – Languor

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. – Armoury

I have now posted a workaround for these issues - please see #answer-44391959 :) – Armoury

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

Armoury

Of all of the solutions I've found, this is the only one that has worked perfectly with zero issues, thank you! – Thornie

Exactly what I'm looking for. Other methods which bind hidden event would cause all hide action to execute the callback. – Cannery

Best answer, also works with BS4 and BS5 when using fade too. – Creature

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);
});

Mccartney

This does allow for scrolling, but isn't immediate and causes page flicker. Please see #answer-44391959 for a workaround :) – Armoury

This is supposed to be the correct answer. – Boong

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;}

Lavelle

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>

Micrometeorite

Unfortunately this method suffers the scrolling and padding issues mentioned previously, please see #answer-44391959 for a workaround :) – Armoury

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.

Disorganization