遮罩层的实现及应用

最新推荐文章于 2024-05-12 23:29:14 发布

swpu_lwf

最新推荐文章于 2024-05-12 23:29:14 发布

阅读量1.1w

点赞数 2

分类专栏： css JavaScript 文章标签： css js

本文链接：https://blog.csdn.net/liwenfei123/article/details/71435431

版权

JavaScript 同时被 2 个专栏收录

62 篇文章 2 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

遮罩层的实现：
1、实现思路：
利用div实现遮罩层效果：利用一个全屏、半透明的div遮住页面上其它元素

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>遮罩层</title>
    <style>
        html,body {
            margin:0;
            height:100%;
        }
        #shade{
            position:absolute;
            top:0;
            left:0;
            z-index:2;
            width:100%;
            height:100%;
            background-color:#000;
            opacity:0.3;
            /*兼容IE8及以下版本浏览器*/
            filter: alpha(opacity=30);
            display:none;
        }

        #modal {
            position: absolute;
            z-index:3;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width:200px;
            height:200px;
            margin: auto;
            display:none;
            background-color:#FF0;
        }
    </style>
    <script>
        window.onload=function(){
            var a1=document.getElementById('a1');
            var a2=document.getElementById('a2');
            a1.onclick=shield;
            a2.onclick=cancel_shield;

            function shield(e){
                e.preventDefault();
                var shade = document.getElementById("shade");
                shade.style.display = "block";

                var modal = document.getElementById("modal");
                modal.style.display = "block";
            }

            function cancel_shield(e){
                e.preventDefault();
                var shade = document.getElementById("shade");
                shade.style.display = "none";

                var modal = document.getElementById("modal");
                modal.style.display = "none";
            }
        };
    </script>
</head>

<body>
<a id="a1" href="#">打开遮罩</a>
<div id="shade"></div>
<div id="modal">
    <a id="a2" href="#">关闭</a>
</div>
</body>

</html>

效果图：
这里写图片描述

点击“打开遮罩”：

点击关闭：

遮罩层的应用：图片模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片模态框</title>
    <style>
        #myImg{
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;

            cursor: pointer;

            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            -o-transition: all 0.3s;
            transition: all 0.3s;
        }
        #myImg:hover{
            opacity: 0.7;
        }

        .modal{
            display: none;
            position: fixed;
            z-index:1;
            left:0;
            top:0;
            width:100%;
            height:100%;
            padding-top:50px;
            overflow: auto;
            background-color:rgb(0,0,0);
            background-color:rgba(0,0,0,0.9);
        }
        .modal-content{
            margin:auto;
            display: block;
            width:100%;
            max-width: 700px;
        }
        #caption{
            margin:auto;
            display: block;
            width:80%;
            max-width:700px;
            text-align: center;
            color: #ccc;
            padding:10px 0;
            height:150px;
        }
        .modal-content,#caption{
            -webkit-animation:zoom 0.6s;
            -o-animation:zoom 0.6s;
            animation:zoom 0.6s;
        }  
        @-webkit-keyframes zoom {
               from{
                   -webkit-transform: scale(0.1);
               }
               to{
                   -webkit-transform: scale(1);
               }
           }
        @keyframes zoom {
            from{
                transform: scale(0.1);
            }
            to{
                transform: scale(1);
            }
        }

        .close{
            position: absolute;
            top:15px;
            right:35px;
            color: #f1f1f1;
            font-size: 40px;
            font-weight:bold;
            transition: 0.3s;
        }
        .close:hover,.close:focus{
            color: #bbb;
            text-decoration: none;
            cursor: pointer;
        }
        /* 100% Image Width on Smaller Screens */
        @media only screen and (max-width: 700px){
            .modal-content {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <h2>图片模态框</h2>
    <p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。<br/>
        首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<br/>
        然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：
    </p>
    <img id="myImg" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

    <!--The modal-->
    <div id="myModal" class="modal">
        <span class="close">×</span>
        <img class="modal-content" id="img01"/>
        <div id="caption"></div>
    </div>

    <script>
        var modal=document.getElementById('myModal');
        var img=document.getElementById('myImg');
        var modalImg=document.getElementById('img01');
        var captionText=document.getElementById('caption');
        img.onclick=function(){
            modal.style.display='block';
            modalImg.src=this.src;
            modalImg.alt=this.alt;
            captionText.innerHTML=this.alt;
        };
        var span=document.getElementsByClassName('close')[0];
        span.onclick=function(){
            modal.style.display='none';
        }
    </script>
</body>
</html>

效果图：
这里写图片描述

点击图片：

点击“X”:

swpu_lwf

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
遮罩层的实现及应用

遮罩层的实现： 1、实现思路：利用div实现遮罩层效果：利用一个全屏、半透明的div遮住页面上其它元素<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>遮罩层</title> <style> html,body { margin:0; h
复制链接

扫一扫