遮罩层的实现及应用

来源：互联网发布：淘宝模板代码怎么使用编辑：程序博客网时间：2024/05/16 12:44

遮罩层的实现：
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”:

0 0