javascript - Bootstrap Modal 无法在照片网格中打开

Question

我有一个照片随机播放网格，使用这个网格我可以选择几个主题，它只显示该主题的图片。

现在我想执行以下操作，当我单击要打开模式的图像时。我遇到的问题如下:

• 第一张图片(后面有模态)打开没有问题，但其他图片(有模态)可能打不开，我看到了(一半)但我无法点击它们。

这是我的代码:

HTML

<ul class="portfolio-sorting list-inline text-center">
    <li><a href="#" data-group="all" class="active">All</a></li>
    <li><a href="#" data-group="heren">Heren</a></li>
    <li><a href="#" data-group="dames">Dames</a></li>
    <li><a href="#" data-group="jongens">jongens</a></li>
    <li><a href="#" data-group="meisjes">meisjes</a></li>
    <li><a href="#" data-group="gemengd">gemengd</a></li>
</ul>
<!--end portfolio sorting -->

<ul class="portfolio-items list-unstyled" id="grid">
    <li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
        <figure class="portfolio-item">
            <button type="button" class="btn button_test" value="Heren1" data-toggle="modal" data-target="#heren1">                 <img src="img/test.jpg" alt="Item 1" class="img-responsive">
                <h2 class="teams">heren 1</h2>
            </button>
            <div class="modal fade bs-example-modal-lg" id="heren1" role="dialog" style="display: none;">
                <div class="modal-dialog modal-lg">
                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">×</button>
                            <h4 class="modal-title black_tekst">Heren 1</h4>
                        </div>
                        <div class="modal-body">
                            <!--Tekst -->
                            <h2 class="black_tekst">Test </h2>
                            <p class="black_tekst">
                                <br>
                                <br> Team informatie
                                <br>
                                <br>
                            </p>
                            <h3 class="black_tekst">Test</h3>
                            <!--Einde tekst -->
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </figure>
    </li>
    <!--------------------------------------------------------------------------->
    <li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
        <figure class="portfolio-item">
            <button type="button" class="btn button_test" value="Heren2" data-toggle="modal" data-target="#heren2">                 <img src="img/test.jpg" alt="Item 1" class="img-responsive">

                <h2 class="teams">heren 2</h2>
            </button>
            <div class="modal fade" id="heren2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                        </div>
                        <div class="modal-body">
                            ...
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                    </div>
                </div>
            </div>
        </figure>
     </li>
    <!--------------------------------------------------------------------------------->
    <!-- sizer -->
    <li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer"></li>
</ul>
<!--end portfolio grid -->

您可以在 https://jsfiddle.net/hrpj3j9t/2/ 上找到 CSS 和 JS

Answer 1

1) jsfiddle 上提供的错误代码 - js 代码部分不清楚，modernizr

2) 从我的 Angular 来看，最好的方法是使用 jquery 生成您需要的代码。在 imageSrc 中，我指的是图像的真实路径。这是概念的小例子:

将模态框放在顶部:

<body>
    <div class="modal" id="modal">
       <img id="modalImage" src = "" alt="image">
       ...
   </div>
    ...
    <div class="elementOfGrid" data-image="imageSrc">
</body>

在 js 中:

    $('elementOfGrid').click(function(){
           $('#modal #modalImage').attr({"src":$(this).data("image")});
           $('#modal').modal("show");
    }

另一个变体而不是设置属性，你可以生成整个 html 并像这样使用它:

    $('#modal').html('');
    var htmlRow = '<div class="modalImage"><img src="imageSrc"></div>';
    $('#modal').html(htmlRow);