Open a Modal from another modal and close the first (launching) modal
<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);
});
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
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