How to make a modal window with a ListView in Yii2?

Question

css

Good afternoon.
I use ListView (more precisely, a plugin with infinity scroll)
index.php

<?php
        echo ListView::widget([
            'dataProvider' => $dataProvider,
            'itemOptions' => ['class' => '.item'],
            'itemView' => '_item_view',
            'pager' => ['class' => ScrollPager::className(),
                'enabledExtensions' => [
                    ScrollPager::EXTENSION_TRIGGER => 1000,
                    ScrollPager::EXTENSION_PAGING,
                    ScrollPager::EXTENSION_NONE_LEFT,
                    ScrollPager::EXTENSION_SPINNER],
                'spinnerTemplate' => '<div class="ias-spinner" style="text-align: center; z-index:100; "><img src="{src}"/></div>',
                'noneLeftText' => ''
            ],
        ]);
        ?>

To display gallery
_item_view.php

<div class="col-md-4 portfolio-item item thumbnail">
    <a href="" class="" data-toggle="modal" data-target="#foto">
        <img class="img-responsive thumbnail" src="<?= $model->url ?>" alt="">
    </a>   
</div>

Next, when I click on the photo, I want a modal window to open

<div class="modal fade modalfoto" id="foto" tabindex="-1" role="dialog" aria-labelledby="myLargeModalPhoto" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <?= $model->url ?>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>              
            </div> 
            <div class="modal-body">
                <img src="<?= $model->url ?>" class="img-responsive img-rounded center-block" alt="">
            </div>
            <div class="modal-footer">
                <ul class="list-inline modal-bar">
                    <li>
                        <a href="#" class="fa download modal-bar"></a>
                    </li>
                    <li>
                        <a href="#" class="fa fa-facebook"></a>
                    </li>
                    <li>
                        <a href="#" class="fa fa-vk"></a>
                    </li>       
                </ul>            
            </div>
        </div>
    </div>
</div>

What is the question - if I put a modal window in _item_view.php, then the window that appears "climbs" under the bottom of everything (the slider is spinning there) and z-index does not help. If I put a modal window in index.php, then everything is ok, except, of course, another problem - there cannot be another $modal->url. How to solve this problem?

Answer 1

As an option, I can suggest doing this using JS. Put the modal window in index.php, and when you click on the image, insert the src for images in the modal window, which we take from the image that we clicked on.

$(document).on('click', '.item img', function (event) {
    var src = $(this).attr('src');
    $('#foto img').attr('src', src);
});