Twitter bootstrap - несколько модальных окон

Question

Я использую компонент модального окна в цикле. В каждом содержимом цикла имеется количество эскизов X с разными идентификаторами (у модалов также есть разные идентификаторы), которые должны запускать модалы по их атрибуту переключения данных, однако модалы работают только с первым элементом цикла, только для набора данных фон экрана с остальными. Модальные содержимое и разметка окон находятся в DOM, только они не отображаются.

Я попытался удалить класс fade, переименовав идентификаторы, но мне пока не повезло. Я нашел similar 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> 

РЕШЕНИЕ:

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

и

<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 должен быть динамичным. Так должно быть что-то вроде id=modal_<PK of Object>