【Yii2】頁面點擊圖片全屏放大封裝小部件

需求

在後臺管理系統中，一般遇到圖片列表或者詳情，都會要求點擊放大展示完整圖片，畢竟在列表中不能百分百展示完整圖片。

實現

最終效果的實現是在img增加點擊事件，在另一個div中展示圖片。

爲什麼要封裝在小部件裏呢，當然是方便調用。

需要這個效果的界面很多，如果每個頁面都複製粘貼的話，非常不優雅，並且不好維護。

下面是完整代碼

BackendBigImg.php

<?php

namespace common\widgets;
use common\models\DmAdPosition;
use yii;
use yii\base\Widget;


/**
 * 圖片放大部件
 * Class BackendBigImg
 * @package common\widgets
 */
class BackendBigImg extends Widget
{
    public function run()
	{
		return $this->render('backendbigimg');
	}
}

view/backendbigimg.php

<style type="text/css">
    .bigImg {
        position: absolute;
        top: 50%;
        left: 50%;
        /*圖片向左移動自身寬度的50%, 向上移動自身高度的50%。*/
        transform: translate(-50%,-50%);
    }
    /*遮罩層*/
    .opacityBottom {
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0,0,0,0.8);
        z-index: 1000;
        top: 0;
        left: 0;
    }
</style>
<?php
$js = <<<JS
$('img').click(function () {
    //獲取圖片路徑
    var imgsrc = $(this).attr("src");
    console.log(imgsrc);
    var opacityBottom = '<div class="opacityBottom" style = "display:none"><img class="bigImg" src="' + imgsrc + '"></div>';
    $(document.body).append(opacityBottom);
    toBigImg();//變大函數

});

function toBigImg() {
    $(".opacityBottom").addClass("opacityBottom");//添加遮罩層
    $(".opacityBottom").show();
    $("html,body").addClass("none-scroll");//下層不可滑動
    $(".bigImg").addClass("bigImg");//添加圖片樣式
    $(".opacityBottom").click(function () {//點擊關閉
        $("html,body").removeClass("none-scroll");
        $(".opacityBottom").remove();
    })};
JS;
$this->registerJs($js);
?>

調用方式，在視圖中

<?php echo \common\widgets\BackendBigImg::widget(); ?>

總結

實現功能是第一步，更重要的還有能不能更進一步去做優化。