BOOTSTRAP 5: Dynamic Modal Content via Data Attributes

Easy way to display data attribute data in a Bootstrap 5 modal so that you can make one modal to rule them all. Includes product image loading based on image load order.

HTML

<mvt:foreach iterator="product" array="products">
	<mvt:do file="g.Module_Library_DB" name="l.settings:imagetotal" value="ProductImageList_Load_Product( l.settings:product:id,l.settings:productimages )" />
	<mvt:do file="g.Module_Library_DB" name="l.settings:imagetotal" value="Image_Load_ID( l.settings:productimages[1]:image_id,l.settings:firstimage )" />

	<p>
		<a href="&mvt:product:uri;" data-bs-toggle="modal" data-bs-target="#product-modal" data-desc="&mvte:product:descrip;" data-title="&mvte:product:name;" data-image="&mvt:firstimage:image;" >
	</p>
</mvt:foreach>

<mvt:comment>
#
# modal
#
</mvt:comment>

<div class="modal fade" id="product-modal" tabindex="-1" aria-labelledby="productDetails" aria-hidden="true">
  <div class="modal-dialog modal-lg">
	<div class="modal-content">
	  <div class="modal-header">
		<h1 class="modal-title fs-5 product-modal-title"></h1>
		<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	  </div>
	  <div class="modal-body">
	<div class="row">
	<div class="col-sm-6">
			<img id="product-modal-image">
	</div>
	<div class="col-sm-6">
			<p class="product-modal-title fw-bold"></p>
			<div id="product-modal-description"></div>
	</div>
	</div>
	  </div>
	  <div class="modal-footer">
			<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
	  </div>
	</div>
  </div>
</div>

SCRIPT (jquery)

We use a class for the product title since it's being displayed in more than one place, otherwise an ID is more common for this stuff.

<script>
const myModalEl = document.getElementById('product-modal')
myModalEl.addEventListener('show.bs.modal', event => {
	var button = $(event.relatedTarget);
	var title = button.data('title');
	var desc = button.data('desc');
	var image = '/mm5/' + button.data('image');
	$(".product-modal-title").text(title);
	$("#product-modal-description").html(desc);
	$("#product-modal-image").attr("src", image);
})
</script>