Question

我正在创建一个投资组合，并有一个水平滚动图库，其中包含我个人项目的屏幕截图。单击其中一个屏幕截图图像后，我想要一个弹出相关案例研究材料的模态。

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

没有出现模态，它只是跳到页面顶部。任何人都可以提供有关如何实现这一目标的任何帮助吗？

首先发布在这里......请保持温和！

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>

JS

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

Demo fiddle

Answer 1

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

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

如何为水平图库内的图像创建模态？

1 个答案: