HTML点击图片，弹窗并放大

最新推荐文章于 2024-07-27 23:51:58 发布

技术小零

最新推荐文章于 2024-07-27 23:51:58 发布

阅读量7.5k

点赞数 9

分类专栏： Asp.net mvc 文章标签： html css

本文链接：https://blog.csdn.net/weixin_46616558/article/details/122462663

版权

Asp.net mvc 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.样式

<head>
    <style type="text/css">
        *{
            margin:0px;
            padding:0px;
        }
        /* 触发弹窗图片的样式 */
        .myImg {
            margin: 10px;
            border-radius: 20px;
            cursor: pointer;
            float: left;
            max-height: 130px;
        }

        /* 弹窗的位置和背景颜色 */
        .modal {
            display: none; 
            position: fixed; /* 绝对定位 */
            z-index: 1; /* 元素置前 */
            padding-top: 50px;
            width: 100%; 
            height: 100%; 
            overflow: auto; /* 溢出出现滚动条 */
        }

        /* 弹窗图片的大小 */
        .content {
            margin: auto;
            display: block;
            min-height:500px;
            max-height:600px;
        }
    </style>
</head>

2.控件

<body>
    <div>
        <!-- 图片 -->
        <img loading="lazy" id="Img1" class="myImg" src="D:/1.png" onclick="demo('Img1')">
         <!-- 弹窗 -->
         <div id="myModal" class="modal" onclick="document.getElementById('myModal').style.display='none'">
            <!-- 弹窗内容 -->
            <img class="content" id="img01">
        </div>
        <!--相应图片点击操作-->
        <script>
            function demo(imgId) {
                document.getElementById('myModal').style.display = "block";
                document.getElementById("img01").src = document.getElementById(imgId).src;
            }
        </script>
    </div>
</body>