Question

I’m using the modal window component in a loop. Every loop content has X number of thumbnails with different IDs (the modals also have different IDs) that should trigger the modals by their data-toggle attribute, however the modals only work on the first item of the loop, the data-toggle only set the background of the screen with the rest.
The modal windows contents and markup are in the DOM, only they don’t show up.

I have tried removing the fade class, renaming the IDs, but I have no luck so far.
I’ve found a similar problem, but that doesn’t help my case.

What could be the problem?

<li class="span3">
<div class="modal hide" id="modal1">
   <div class="modal-header">
        <button class="close" data-dismiss="modal">x</button>
        <h3>Lipsum</h3>
   </div>
   <div class="modal-body">
       <p>Lipsum</p>
   <hr>
   <img src="<?php the_field('srceenshot')?>">
   </div>
   <div class="modal-footer">
       <button class="close" data-dismiss="modal">x</button>
   </div>
</div>
    <a class="thumbnail" data-toggle="modal" rel="popover" data-content="<?php the_field('screenshot_text')?>" data-original-title="<?php the_field('screenshot_header')?>" href="#modal1">
        <img src="<?php the_field('screenshot')?>">
    </a>
</li>

SOLUTION:

<div class="modal hide" id="modal1_<?php echo $count">

and

<a class="thumbnail" data-toggle="modal" rel="popover" data-content="<?php the_field('screenshot_text')?>" data-original-title="<?php the_field('screenshot_header')?>" href="#modal1_<?php echo $count">

Answer 1

id=modal1 needs to be dynamic. So it should be something like id=modal_<PK of Object>