在 Yii2 的弹出窗口中打开 DetailView::widget 上的图片

Question

我想在点击后在弹出窗口中打开图像，在 Yii2 中，DetailView::widget 我已经有：

<?= DetailView::widget( [
        'model'      => $user,
        'attributes' => [
            'identity_number',
            [
                'attribute'=>'identity_file',
                'value'=>$user->identity_file,
                'format' => ['image',['width'=>'120','height'=>'120']],
            ],
        ],
    ] ) ?>

显示图片，现在我想在点击后弹出窗口，我尝试了以下操作：

<?php
    \yii\bootstrap\Modal::begin([ 'id' => 'identity_file', 'footer' => '<a href="#" class="btn btn-sm btn-primary" data-dismiss="modal">Close</a>', ]);
    \yii\bootstrap\Modal::end();
    ?>

但这非常混乱，我认为应该有一种更简洁的方法来使用 DetailView 选项来执行此操作。

Answer 1

一种更简单的方法是在模态框内提供默认的 img 标签，并提供单击 DetailView 内图片的来源，这将在模态框内加载图片。

此外，图像可以是任何大小，因此可以是模态 window，可以使用 class .modal-lg 或 [=] 将其配置为任何大小的大小16=] classes，所以将 img-responsive class 添加到模态 window 内的默认 img 标签，图像将根据大小响应模态 window.

所以，首先要做的是在class img-responsive 和 src='//:0' 模态框内添加一个图像标签，你可以 Read Here why use ://0 for empty image tag

\yii\bootstrap\Modal::begin(['id' => 'identity_file', 'footer' => '<a href="#" class="btn btn-sm btn-primary" data-dismiss="modal">Close</a>']);
echo "<img src='//:0' class='img-responsive'>";
\yii\bootstrap\Modal::end();

在 DetailView 代码内的图像中添加一个 class，我假设 $user->identity_file 具有文件的完整路径。

<?php echo DetailView::widget(
    [
        'model' => $user,
        'attributes' => [
            'id',
            [
                'attribute' => 'identity_file',
                'value' => $user->identity_file,
                'format' => [
                    'image',
                    ['width' => '120', 'height' => '120', 'class' => 'popup-image'],
                ],
            ],
        ],
    ]
)
?>

然后在您使用 DetailView 小部件的视图顶部添加以下 javascript。

$js = <<<JS
    $(".popup-image").on('click',function(){
        $("#identity_file img").attr('src', $(this).attr('src'))
        $("#identity_file").modal('show');
    });
JS;
    $this->registerJs($js, View::POS_READY);

现在单击图像，您将看到包含在模态 window 中的具有响应尺寸的响应图像。

Answer 2

您可以使用 jquery 打开模式弹出窗口并在其中显示图像。

如果“$user->identity_file”给出了准确的图像路径，则使用下面的代码

<div class="detail_view">
    <?= DetailView::widget( [
        'model' => $user,
        'attributes' => [
            'identity_number',
            [
                'attribute'=>'identity_file',
                'value'=>$user->identity_file,
                'format' => ['image',['width'=>'40','height'=>'40']],
            ],
        ],
    ]) ?>
</div>

<div id="imageModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Image</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="image_holder"></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).on('click','.detail_view img',function (e) {
        $('#imageModal').modal('show');
        $('#image_holder').html('<img src="'+$(this).attr('src')+'" width="120" height="120">');
    })
</script>

Answer 3

我尝试了一些让我的代码看起来更好的方法：

<?= DetailView::widget( [
    'model'      => $user,
    'attributes' => [
        'identity_number',
        [
            'attribute'=>'identity_file',
            'format'    => 'raw',
            'value'     => function ( $model ) {
                return $this->render( '_image', [
                    'src'   => $model->identity_file,
                    'title' => $model->title
                ] );
            }
        ],
    ],
] ) ?>

然后我添加了这样的局部视图 _image.php：

<a href="<?= $src; ?>" data-popup="lightbox"><img src="<?= $src; ?>" style="width: 200px;" class="img-rounded" alt="<?= $title; ?>"></a>

所以，看起来好多了；但是，我想知道这样做是否正确。

在 Yii2 的弹出窗口中打开 DetailView::widget 上的图片

Open picture on DetailView::widget on a popup, in Yii2

yii2

detailview