html - Twitter bootstrap - 多个模式窗口

标签 html twitter-bootstrap modal-dialog

我在循环中使用模态窗口组件。每个循环内容都有 X 个具有不同 ID 的缩略图(模态也有不同的 ID),这些缩略图应通过其 data-toggle 属性触发模态,但是模态仅适用于循环的第一项,仅设置 data-toggle屏幕的背景与其余部分。 模态窗口内容和标记位于 DOM 中,只是它们不显示。

我尝试过删除淡入淡出类,重命名 ID,但到目前为止我还没有运气。 我找到了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">

最佳答案

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

关于html - Twitter bootstrap - 多个模式窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10362778/

相关文章:

javascript - 如何使用 Bootstrap 在 react 中禁用输入?

python - wxPython 自定义对话框加载不正确

c# - 来自模态对话框的模态对话框 - 当第二个关闭时都关闭 - 为什么?

html - 禁止 Bootstrap 模式在单击屏幕上的任意位置时关闭

jquery - 如何使用 Bootstrap Tour 弹出窗口浏览选项卡?

angularjs - Angular UI Bootstrap 模态对话框关闭事件

javascript - 使用 AJAX 解析 XML 数据

html - 文字图案叠加

html - 确保较大 div 中两个 div 之间的线一直延伸到父 div 的底部

html - 如何在 bootstrap 4 中的 flexbox 包装元素之间添加垂直间距?