I have a page with two repeaters. One with a gallery of images. The second a bootstrap modal popup for each image. Each one has a separate transformation. The gallery looks great. The modal pop up also looks great. EXCEPT, it pops up the first pop up for each image, instead of each having its own. I suspect the issue is is with the tabindex="-1", but everything I have tried makes no difference.
Here is the code in the transformation:
<div class="modal" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<div class="Gallery-PopUp">
<div class="top">
<img src="<%# Eval("PopupImage") %>" alt="<%# EvalText("ImageAlt", true) %>" Class="PopupImage"/>
<button type="button" class="close" data-dismiss="modal">X</button> </div>
<div class="OverlayText">
<%# IfEmpty(Eval("GalleryQuote"), "", "<span class='QuoteOverlay'>" + Eval<string>("GalleryQuote") + "</span>") %>
<br/>
<%# IfEmpty(Eval("Name"), "", "<span class='OverlayName'>" + Eval<string>("Name") + "</span>") %>
<%# IfEmpty(Eval("Position"), "", "<span class='OverlayPosition'>" + Eval<string>("Position") + "</span>") %> </div>
<div class="bottom">
<div class="textWrapper">
<%# IfEmpty(Eval("Heading"), "", "<span class='PopupHeading'>" + Eval<string>("Heading") + "</span>") %>
<%# IfEmpty(Eval("DetailedText"), "", "<span class='DetailedText'>" + Eval<string>("DetailedText") + "</span>") %> </div>
</div> </div> </div> </div> </div> </div> </div>
https://tutuappx.com/ Vidmate