点击缩略图模态框显示大图

最新推荐文章于 2021-06-03 02:42:45 发布

倪畅

最新推荐文章于 2021-06-03 02:42:45 发布

阅读量1.2k

点赞数 1

分类专栏： HTML/CSS

HTML/CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

原文地址：https://www.jb51.net/article/112764.htm

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>close</title>
    <style>
    #real {
        /*点击弹出模态框的图片*/
        margin: 30px;
        width: 250px;
        border-radius: 6px;
    }

    #real:hover {
        opacity: 0.6;
    }

    #mo {
        display: none;
        /*隐藏*/
        width: 100%;
        height: 100%;
        position: fixed;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.7);
        top: 0px;
        left: 0px;
        z-index: 1;
    }

    #moimg {
        display: block;
        margin: 25px auto;
        width: 60%;
        max-width: 750px;
    }

    #caption {
        text-align: center;
        margin: 15px auto;
        width: 60%;
        max-height: 750px;
        font-size: 20px;
        color: #ccc;
    }

    #moimg,
    #caption {
        -webkit-animation: first 1s;
        -o-animation: first 1s;
        animation: first 1s;
    }

    @keyframes first {
        from {
            transform: scale(0.1);
        }

        to {
            transform: scale(1);
        }
    }

    .close {
        font-size: 40px;
        font-weight: bold;
        position: absolute;
        top: 20px;
        right: 14%;
        color: #f1f1f1;
    }

    .close:hover,
    .close:focus {
        color: #bbb;
        cursor: pointer;
    }

    @media only screen and(max-width:750px) {
        #moimg {
            width: 100%;
        }
    }
    </style>
</head>

<body>
    <h2>图片点击弹出模态框效果</h2>
    <p>图片模态框很不错，是个值得学习的效果</p>
    <img src="https://ss1.baidu.com/9vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=97603aac25381f3081198ba999004c67/6159252dd42a28343dd43e9f56b5c9ea15cebf37.jpg" id="real" alt="model test picture">
    <!--图片模态框 -->
    <div class="motai" id="mo">
        <span class="close" id="close">×</span>
        <img class="motaiimg" id="moimg">
        <div id="caption"></div>
    </div>
    <script>
    var motai = document.getElementById('mo')
    var moimg = document.getElementById("moimg")
    var realimg = document.getElementById("real")
    var caption = document.getElementById("caption")
    realimg.onclick = function() {
        motai.style.display = "block"
        moimg.src = this.src
        caption.innerHTML = this.alt
    }
    var span = document.getElementById("close");
    span.onclick = function() {
        motai.style.display = "none";
    }
    </script>
</body>

</html>