User User - 4 months ago 18
jQuery Question

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

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

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

Comments