Creating a loop of Bootstrap Modals

September 28, 2019 -

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" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">×</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

A Foreach Loop of Modals

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.

Related Posts:

Categorized Javascript/jQuery, PHP Tagged , ,