Creating a loop of Bootstrap Modals

To create a loop of Bootstrap style modals on a page, you can use a foreach or while loop in PHP.

First, let’s do the code for one modal.

Single Modal Code

<!– Button to Open the Modal –> <button type=”button” data-toggle=”modal” data-target=”#myModal”> Open modal </button> <!– The Modal –> <div id=”myModal”> <div> <div> <!– Modal Header –> <div> <h4>Modal Heading</h4> <button type=”button” data-dismiss=”modal”>×</button> </div> <!– Modal body –> <div> Modal body.. </div> <!– Modal footer –> <div> <button type=”button” data-dismiss=”modal”>Close</button> </div> </div> </div> </div> Open modal

Modal Heading

× Modal body.. Close

A Foreach Loop of Modals

View the code on Gist. Open modal 1 Open modal 2 Open modal 3 Open modal 4

So an array is created with a known amount of modals, a counter variable $i is created and incremented after each loop iteration, that counter variable is used in the button and modal ID to link the correct modals together.

See how to create a WordPress custom loop of modals.