Question

<div id="freewall" class="freewall">
    <g:each in="${list}" var="image">
        <div class="brick">
            <div class="grid-tile">
                <a class="overlay" href="/more/${image.id}" data-toggle="modal" data-target="#detailModal">
                <img src="${image.referralImage}" width="100%" />
                </a>

            </div>

            <div class="info">
                <p class="title">${image.tags}</p>
                <p class="owner">by ${image.description}</p>
            </div>
        </div>
    </g:each>
</div>


<div id="detailModal" class="modal hide mod pure-g t-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>

</div>

使用带有动态图像的bootstrap及其详细信息。

起初，我用过

$('#detailModal').modal('show');

问题是，当加载页面时，detailModal将不会出现。

$('#detailModal').modal('hide');
  $('.grid-tile a').on('click', function(){
  $('#detailModal').modal('show');
});

加载页面时，不会显示detailModal。但是当我点击图块上的弹出细节的网格图块时，它没有做任何事情，这意味着根本没有弹出窗口。

我无法想象我可以忽略或出错的地方。帮助赞赏！

Answer 1

我认为您点击链接后页面会刷新。尝试使用event.preventDefault()之类的，

$('.grid-tile a').on('click', function(e){
    e.preventDefault();// to prevent page refresh
    $('#detailModal').modal('show');
});

希望，它有效，或者是你的代码的在线演示。

Answer 2

你可以尝试直接在a标签上放一个类并引用它而不是grid-title a

也尝试使用点击功能

$('#detailModal').modal('hide');
$('.newAnchorClassName').click(){
    $('#detailModal').modal('show');
};

最后检查是否有任何javascript错误被解雇

单击时不显示Bootstrap弹出窗口

2 个答案: