Multiple Bootstrap Modals with next prev buttons

by skybers
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.
- 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">×</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">×</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">×</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'); }); });
Recommended Posts

How to use require field in bootstrap form?
July 25, 2018

Removing ‘blue border’ from input text field
July 12, 2018

Bootstrap NavBar with left, or right aligned items
June 7, 2018