BOOTSTRAP 4: Dyanmic Modal Content

This is taken from colman, just the basic idea of how it works: https://colmanandcompany.com/short-sleeve-basic-t-shirt.html - click on a color thumbnail on left side of grid.

Colman appears to be running bs3 but this should work on bs4 and 5 (with appropriate html modal updates) since the show.bs.modal js event seems to be the same.

The thumbnails, divs, etc to click on to get a modal with an image:

<div style="width: 40px; height: 40px; background-color: #BDBEC9; border: solid 1px #cccccc; margin:0 auto; cursor: pointer;" data-toggle="modal" data-target="#productimagemodal" data-color="Ash Heather" data-image="graphics/00000001/vapor-short-sleeve-t-shirt_ah.jpg"> 
	<span title="Ash Heather"> </span> 
</div>

<div style="width: 40px; height: 40px; background-color: #B5B697; border: solid 1px #cccccc; margin:0 auto; cursor: pointer;" data-toggle="modal" data-target="#productimagemodal" data-color="Alpine Spruce" data-image="graphics/00000001/20/vapor-short-sleeve-t-shirt-front_as.jpg.jpg"> 
	<span title="Alpine Spruce"> </span> 
</div>

The modal itself:

<div class="modal fade" id="productimagemodal" tabindex="-1" role="dialog" aria-labelledby="productimagemodal" style="display: none;" aria-hidden="true"> 
<div class="modal-dialog" role="document"> 
<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"><span id="productimagetitle">Steel</span> Short Sleeve Basic T-Shirt - Vapor Apparel</h4> </div> <div class="modal-body"> 
		<img id="img" src="graphics/00000001/vapor-apparel-basic-amer-back-t-shirt-steel.png"> 
	</div> 
	<div class="modal-footer"> 
		<button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
	</div> 
</div> 
</div> 
</div>

JS:

<script>
$('#productimagemodal').on('show.bs.modal', function (event) {
	var button = $(event.relatedTarget) // Button that triggered the modal
	var color = button.data('color')
	var image = button.data('image') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
	var modal = $(this)
	modal.find('#productimagetitle').text(color)
	$("#img").attr("src", image);
})
</script>