Multiple Bootstrap Modals with next prev buttons

It is very easy how to make multiple Bootstrap Modals with next and previous button. I will explain step by step about multiple bootstrap Modals.

1. You create multiple modal just like me.

It is the code for group of button where you can open your Modal Popup.

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1"> Button 1 </button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> Button 2 </button>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal3"> Button 1 </button>

It is the code for Modal Popup where you can see multiple Modal Popup.

<!-- Modal  Popup 1 -->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title 1</h4>
</div>
<div class="modal-body">
Modal Popup 1
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- Modal  Popup 2 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title 2</h4>
</div>
<div class="modal-body">
Modal Popup 2
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<!-- Modal  Popup 3 -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title 3</h4>
</div>
<div class="modal-body">
Modal Popup 3
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

 

Here are the JavaScript Code for Next and Previous. 

$("div[id^='myModal']").each(function(){

var currentModal = $(this);

//click next
currentModal.find('.btn-next').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal']").first().modal('show');
});

//click prev
currentModal.find('.btn-prev').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").prevAll("div[id^='myModal']").first().modal('show');
});

});