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">×</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>
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>