Twitter引导 - 多模态窗口 [英] Twitter bootstrap - multiple modal windows

问题描述

我在循环中使用模态窗口组件。每个循环内容都有X个具有不同ID的缩略图（模态也有不同的ID），它们应该通过它们的数据切换属性来触发模态，但是模态仅在循环的第一个项目上工作，数据切换仅设置与其余的屏幕的背景。
模式窗口内容和标记在DOM中，只有它们不显示。

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.

我尝试删除淡化类，重命名ID，但到目前为止我还没有运气。
我找到了类似的问题，但这并不能帮助我的情况。

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.

可能是什么问题？

<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">

和

<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">

推荐答案

id = modal1 需要是动态的。所以它应该是类似于 id = modal_< PK of Object>

这篇关于Twitter引导 - 多模态窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！