Как сделать модальное окно с ListView в Yii2?

Question

[Skrolea]

Добрый день.
Использую ListView (точней плагин с инфинити скролл)
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' => ''
            ],
        ]);
        ?>

Для вывода галереи
_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>

Далее по клику на фото, я хочу, чтобы открывалось модальное окно

<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>

В чем вопрос - если я задаю кладу модальное окно в _item_view.php, то появившееся окно "залазит" под низ всего (там крутится слайдер) и z-index не помогает. Если я кладу модальное окно в index.php, то всё ок, кроме, конечно, другой проблемы - там не может быть еще $modal->url. Как решить данную проблему?

Answer 1

[polar-bear]

Как вариант могу предложить сделать это с помощью JS. Положить модальное окно в index.php, а при клике на картинку вставлять в модальном окне src для картинок, который мы берем у картинки на которую кликнули.

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