遮罩层的实现及应用

news/2024/7/19 13:05:39 标签: css, js

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

js xml">js-doctype"><!DOCTYPE html>
js-tag"><js-title">html>
js-tag"><js-title">head>
    js-tag"><js-title">meta js-attribute">charset=js-value">"utf-8">
    js-tag"><js-title">title>遮罩层js-tag"></js-title">title>
    js-tag"><js-title">style>css">
        js-tag">html,js-tag">body js-rules">{
            js-rule">js-attribute">margin:js-value">js-number">0;
            js-rule">js-attribute">height:js-value">js-number">100%;
        js-rule">}
        js-id">#shadejs-rules">{
            js-rule">js-attribute">position:js-value">absolute;
            js-rule">js-attribute">top:js-value">js-number">0;
            js-rule">js-attribute">left:js-value">js-number">0;
            js-rule">js-attribute">z-index:js-value">js-number">2;
            js-rule">js-attribute">width:js-value">js-number">100%;
            js-rule">js-attribute">height:js-value">js-number">100%;
            js-rule">js-attribute">background-color:js-value">js-hexcolor">#000;
            js-rule">js-attribute">opacity:js-value">js-number">0.3;
            js-comment">/*兼容IE8及以下版本浏览器*/
            js-rule">js-attribute">filter:js-value"> js-function">alpha(opacity=js-number">30);
            js-rule">js-attribute">display:js-value">none;
        js-rule">}

        js-id">#modal js-rules">{
            js-rule">js-attribute">position:js-value"> absolute;
            js-rule">js-attribute">z-index:js-value">js-number">3;
            js-rule">js-attribute">top:js-value"> js-number">0;
            js-rule">js-attribute">bottom:js-value"> js-number">0;
            js-rule">js-attribute">left:js-value"> js-number">0;
            js-rule">js-attribute">right:js-value"> js-number">0;
            js-rule">js-attribute">width:js-value">js-number">200px;
            js-rule">js-attribute">height:js-value">js-number">200px;
            js-rule">js-attribute">margin:js-value"> auto;
            js-rule">js-attribute">display:js-value">none;
            js-rule">js-attribute">background-color:js-value">js-hexcolor">#FF0;
        js-rule">}
    js-tag"></js-title">style>
    js-tag"><js-title">script>
        window.onload=js-function">js-keyword">functionjs-params">(){
            js-keyword">var a1=document.getElementById(js-string">'a1');
            js-keyword">var a2=document.getElementById(js-string">'a2');
            a1.onclick=shield;
            a2.onclick=cancel_shield;

            js-function">js-keyword">function js-title">shieldjs-params">(e){
                e.preventDefault();
                js-keyword">var shade = document.getElementById(js-string">"shade");
                shade.style.display = js-string">"block";

                js-keyword">var modal = document.getElementById(js-string">"modal");
                modal.style.display = js-string">"block";
            }

            js-function">js-keyword">function js-title">cancel_shieldjs-params">(e){
                e.preventDefault();
                js-keyword">var shade = document.getElementById(js-string">"shade");
                shade.style.display = js-string">"none";

                js-keyword">var modal = document.getElementById(js-string">"modal");
                modal.style.display = js-string">"none";
            }
        };
    js-tag"></js-title">script>
js-tag"></js-title">head>

js-tag"><js-title">body>
js-tag"><js-title">a js-attribute">id=js-value">"a1" js-attribute">href=js-value">"#">打开遮罩js-tag"></js-title">a>
js-tag"><js-title">div js-attribute">id=js-value">"shade">js-tag"></js-title">div>
js-tag"><js-title">div js-attribute">id=js-value">"modal">
    js-tag"><js-title">a js-attribute">id=js-value">"a2" js-attribute">href=js-value">"#">关闭js-tag"></js-title">a>
js-tag"></js-title">div>
js-tag"></js-title">body>

js-tag"></js-title">html>

效果图：
这里写图片描述

点击“打开遮罩”：
这里写图片描述

点击关闭：
这里写图片描述


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

js xml">js-doctype"><!DOCTYPE html>
js-tag"><js-title">html js-attribute">lang=js-value">"en">
js-tag"><js-title">head>
    js-tag"><js-title">meta js-attribute">charset=js-value">"UTF-8">
    js-tag"><js-title">title>图片模态框js-tag"></js-title">title>
    js-tag"><js-title">style>css">
        js-id">#myImgjs-rules">{
            js-rule">js-attribute">-webkit-border-radius:js-value"> js-number">5px;
            js-rule">js-attribute">-moz-border-radius:js-value"> js-number">5px;
            js-rule">js-attribute">border-radius:js-value"> js-number">5px;

            js-rule">js-attribute">cursor:js-value"> pointer;

            js-rule">js-attribute">-webkit-transition:js-value"> all js-number">0.3s;
            js-rule">js-attribute">-moz-transition:js-value"> all js-number">0.3s;
            js-rule">js-attribute">-o-transition:js-value"> all js-number">0.3s;
            js-rule">js-attribute">transition:js-value"> all js-number">0.3s;
        js-rule">}
        js-id">#myImgjs-pseudo">:hoverjs-rules">{
            js-rule">js-attribute">opacity:js-value"> js-number">0.7;
        js-rule">}

        js-class">.modaljs-rules">{
            js-rule">js-attribute">display:js-value"> none;
            js-rule">js-attribute">position:js-value"> fixed;
            js-rule">js-attribute">z-index:js-value">js-number">1;
            js-rule">js-attribute">left:js-value">js-number">0;
            js-rule">js-attribute">top:js-value">js-number">0;
            js-rule">js-attribute">width:js-value">js-number">100%;
            js-rule">js-attribute">height:js-value">js-number">100%;
            js-rule">js-attribute">padding-top:js-value">js-number">50px;
            js-rule">js-attribute">overflow:js-value"> auto;
            js-rule">js-attribute">background-color:js-value">js-function">rgb(js-number">0,js-number">0,js-number">0);
            js-rule">js-attribute">background-color:js-value">js-function">rgba(js-number">0,js-number">0,js-number">0,js-number">0.9);
        js-rule">}
        js-class">.modal-contentjs-rules">{
            js-rule">js-attribute">margin:js-value">auto;
            js-rule">js-attribute">display:js-value"> block;
            js-rule">js-attribute">width:js-value">js-number">100%;
            js-rule">js-attribute">max-width:js-value"> js-number">700px;
        js-rule">}
        js-id">#captionjs-rules">{
            js-rule">js-attribute">margin:js-value">auto;
            js-rule">js-attribute">display:js-value"> block;
            js-rule">js-attribute">width:js-value">js-number">80%;
            js-rule">js-attribute">max-width:js-value">js-number">700px;
            js-rule">js-attribute">text-align:js-value"> center;
            js-rule">js-attribute">color:js-value"> js-hexcolor">#ccc;
            js-rule">js-attribute">padding:js-value">js-number">10px js-number">0;
            js-rule">js-attribute">height:js-value">js-number">150px;
        js-rule">}
        js-class">.modal-content,js-id">#captionjs-rules">{
            js-rule">js-attribute">-webkit-animation:js-value">zoom js-number">0.6s;
            js-rule">js-attribute">-o-animation:js-value">zoom js-number">0.6s;
            js-rule">js-attribute">animation:js-value">zoom js-number">0.6s;
        js-rule">}  
        js-at_rule">@js-keyword">-webkit-keyframes zoom {
               js-tag">fromjs-rules">{
                   js-rule">js-attribute">-webkit-transform:js-value"> js-function">scale(js-number">0.1);
               js-rule">}
               js-tag">tojs-rules">{
                   js-rule">js-attribute">-webkit-transform:js-value"> js-function">scale(js-number">1);
               js-rule">}
           }
        js-at_rule">@js-keyword">keyframes zoom {
            js-tag">fromjs-rules">{
                js-rule">js-attribute">transform:js-value"> js-function">scale(js-number">0.1);
            js-rule">}
            js-tag">tojs-rules">{
                js-rule">js-attribute">transform:js-value"> js-function">scale(js-number">1);
            js-rule">}
        }

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

    js-comment"><!--The modal-->
    js-tag"><js-title">div js-attribute">id=js-value">"myModal" js-attribute">class=js-value">"modal">
        js-tag"><js-title">span js-attribute">class=js-value">"close">×js-tag"></js-title">span>
        js-tag"><js-title">img js-attribute">class=js-value">"modal-content" js-attribute">id=js-value">"img01"/>
        js-tag"><js-title">div js-attribute">id=js-value">"caption">js-tag"></js-title">div>
    js-tag"></js-title">div>

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

效果图：
这里写图片描述

点击图片：
这里写图片描述

点击“X”:
这里写图片描述


http://www.niftyadmin.cn/n/764482.html

相关文章

python子类_python-子类和派生、继承

python子类_python-子类和派生、继承

新式类和经典类得区别&#xff1a;###################################################class ClassicClass():passclass NewStyleClass(object):passx1 ClassicClass()x2 NewStyleClass()print x1.__class__, type(x1)print x2.__class__, type(x2)输出结果&#xff1a;__m…
阅读更多...
js兼容性解决及判断过程中的注意事项

js兼容性解决及判断过程中的注意事项

1、js中不允许出现“ - ” 页面中改变文字大小-案例&#xff1a; <!doctype html> <html lang"en"> <head><meta charset"UTF-8"><title>页面中改变文字大小-案例</title> <script type"text/javascript&qu…
阅读更多...
python简单词频统计_Python实现简单中文词频统计示例

python简单词频统计_Python实现简单中文词频统计示例

简单统计一个小说中哪些个汉字出现的频率最高&#xff1a;importcodecsimportmatplotlib.pyplot as pltfrom pylab importmplmpl.rcParams[font.sans-serif] [FangSong] #指定默认字体mpl.rcParams[axes.unicode_minus] False #解决保存图像是负号-显示为方块的问题word[]cou…
阅读更多...
CSS3自定义滚动条的样式

CSS3自定义滚动条的样式

webkit浏览器是如何自定义滚动条的呢&#xff1f; 滚动条demo(只在谷歌浏览器中有效)&#xff1a; demo1&#xff1a;演示一 demo2:演示二 滚动条的组成&#xff1a; ::-webkit-scrollbar&#xff1a;滚动条整体部分::-webkit-scrollbar-thumb &#xff1a;滚动条里面的小…
阅读更多...
python输出回文素数_解决Python中回文数和质数的问题

python输出回文素数_解决Python中回文数和质数的问题

一、前言今天学习视频时课后作业是找出1000以内既是素数又是回文数的数&#xff0c;写代码这个很容易&#xff0c;结果一运行遇到了bug&#xff0c;输出结果跟预期不一样&#xff0c;调试了快30min&#xff0c;再接着一通搜索和回看视频才发现问题所在。所以特地写下来&#xf…
阅读更多...
js中cssText批量修改元素样式

js中cssText批量修改元素样式

平常编写代码&#xff0c;更改一个元素样式的时候&#xff0c;自己都是用 obj.style.width "200px"; obj.style.position "absolute"; obj.style.left "100px"; 之类的代码进行设置&#xff0c;这样的话如果更改样式很多的时候&#xff0c;…
阅读更多...
傅里叶变换公式表_离散傅里叶变换

傅里叶变换公式表_离散傅里叶变换

我们可以选择任意正交函数系来展开函数。所以不妨这样展开函数&#xff1a;显然 和是两个正交函数系。我们合并一下&#xff1a; 现在我们想得到一个在 上的展开式&#xff0c;令 &#xff0c;并且令 ,这样一来 就成为一个连续变量了&#xff0c;于是&#xff1a;第一项由于 &a…
阅读更多...
js中的this是什么、作用、指向

js中的this是什么、作用、指向

1、this是什么&#xff1f; this是JavaScript语言中定义的众多关键字之一&#xff0c;它的特殊在于它自动定义于每一个函数域内。 2、this的作用? 看个例子&#xff1a; function identify() {return this.name.toUpperCase(); } function sayHello() {var greeting "…
阅读更多...
最新文章

Copyright @ 2022~2023