如何为水平画廊内的图像创建模式？答案

【问题标题】：How do I create a modal for an image that is inside a horizontal gallery?如何为水平画廊内的图像创建模式？
【发布时间】：2015-10-20 19:23:48
【问题描述】：

我正在创建一个作品集，并有一个水平滚动的画廊，里面有我个人项目的截图。单击其中一个屏幕截图后，我希望弹出一个带有相关案例研究材料的模式。

这是我对第一个项目案例研究模式的尝试。

没有显示模式，它只是跳到页面顶部。任何人都可以就如何实现这一点提供任何帮助吗？

这里的第一个帖子...请温柔！

HTML

    <!-- Work Section -->
<section id="work" class="container content-section text-center">
    <div class="container">
        <div class="row">
            <div class="gallery horizontal-gallery">
                <a href="#" id="work-modals">
                    <img id="project-src" src="Images/todolist.png">
                </a>
                <img src="Images/todolist.png">
                <img src="Images/todolist.png">
            </div>                    
        </div>
    </div>

    <!-- Work Modal -->
    <div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span> 
                    <span class="sr-only"></span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">ToDoList</h4>
                </div>
                <div class="modal-body">
                    <img src="" id="imagepreview">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</section>

$("#work-modals").on("click", function() {
    $('#imagepreview').attr('src', $('#project-src').attr('src'));
    $('#modal1').modal('show');
});

Demo fiddle

【问题讨论】：

我和@isherwood 在一起。至少可以将代码放入 jsfiddle 吗？
从我在您的问题中提出的演示来看，似乎工作正常。请注意，我已将您的 ID 更改为一个类，并对您的 src jQuery 语句进行了小幅更改。尽管如此，它仍然可以正常工作。
您需要在浏览器控制台中查看错误并报告它们。你确定模态框没有显示，只是在页面下方？
好的，这很奇怪。它在小提琴中工作，但实际上只是跳转到我的页面顶部，站点中没有模式。这可能与我为该部分设置的快照滚动有关吗？
我在之前的评论中确实要求了两件事。请提供它们。 :)

标签： twitter-bootstrap bootstrap-modal image-gallery

【解决方案1】：

尝试阻止默认浏览器操作，以免更改窗口位置。第 1 部分：

$("#work-modals").on("click", function(e) {
  e.preventDefault();
  $('#imagepreview').attr('src', $('#project-src').attr('src'));
  $('#modal1').modal('show');
});

【讨论】：