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代码部分中不清楚，现代化

2）从我的角度来看，最好的方法是使用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);

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

1 个答案: