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

我想在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选项来实现这一点

一种更简单的方法是在模态内部提供默认的

img

标记，并在单击将在模态内部加载图像的

DetailView

内部图像时提供源代码

此外，图像可以是任意大小，模态窗口也可以是任意大小，可以使用class

.modal lg

或

.modal sm

类将其配置为任意大小，因此，将

img responsive

类添加到模态窗口内的默认

img

标记中，图像将响应模态窗口的大小

因此，要做的第一件事是使用class

img responsive

和

src='/:0'

在模态中添加一个图像标记，您可以

然后在使用

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

---

$js=一种更简单的方法是在模态内部提供默认的
img
标记，并在单击将在模态内部加载图像的
DetailView
中的图像时提供源代码

此外，图像可以是任意大小，模态窗口也可以是任意大小，可以使用class
.modal lg
或
.modal sm
类将其配置为任意大小，因此，将
img responsive
类添加到模态窗口内的默认
img
标记中，图像将响应模态窗口的大小

因此，要做的第一件事是使用class
img responsive
和
src='/:0'
在模态中添加一个图像标记，您可以

然后在使用
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);

$js=您可以使用jquery打开一个模式弹出窗口并在其中显示图像

如果“$user->identity\u 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>


形象
&时代；
$（文档）。在（'单击'，'上。详细信息查看img'，函数（e）{
$（'#imageModal'）.modal（'show'）；
$（'image#u holder'）.html（''）；
})
您可以使用jquery打开一个模式弹出窗口并在其中显示图像

如果“$user->identity\u 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>


形象
&时代；
$（文档）。在（'单击'，'上。详细信息查看img'，函数（e）{
$（'#imageModal'）.modal（'show'）；
$（'image#u holder'）.html（''）；
})
我尝试了一些让我的代码看起来更好的东西：

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



因此，它看起来更好；但是，我想知道这样做是否正确。
我尝试了一些让代码看起来更好的方法：

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



因此，它看起来更好；然而，我不知道这样做是否正确。
他已经通过小部件使用引导模式，并且图像需要相对于模式窗口显示，具有纵横比，您使用的是硬编码的
120
宽度和高度，这不是一种整洁的方法（这是OP要求的）因为图像尺寸可能不同，渲染图像将被拉伸或像素化。您正在将点击绑定到
DetailView
中的每个图像，而不仅仅是所需的图像。他已经通过小部件使用引导模式，并且图像需要以纵横比相对于模式窗口显示，您使用的是硬编码
120
宽度和高度，这不是一种整洁的方法（这是OP要求的）因为图像尺寸可能不同，渲染图像将被拉伸或像素化。如果要使用
格式=>“raw”，您将单击绑定到
DetailView
中的每个图像，而不仅仅是所需图像
然后，您只需从闭包中返回
值的html，而不是为一行代码添加单独的视图，我认为您仍然希望使用
格式=>“图像”
对于该列，单击要弹出的图像。@MuhammadOmerAslam我的视图有3张图片，所以我使用了部分视图。但是，如果有一种好方法可以在不使用脏代码的情况下使用format=>“image”，那就更好了。如果您想使用
format=>“raw”
然后，您只需从闭包中返回
值的html，而不是为一行代码添加单独的视图，我认为您仍然希望使用
格式=>“图像”
对于该列，单击要弹出的图像。@MuhammadOmerAslam我的视图有3张图片，因此我使用了部分视图。但是，如果有一种好方法可以在不使用脏代码的情况下使用format=>“image”来解决这个问题，那就更好了。