基于JavaScript实现全屏透明遮罩div层锁屏效果

时间：2021-05-25

废话不多说了，直接给大家写js代码了，代码如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>js全屏透明遮罩锁屏效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">#pageOverlay{visibility:hidden;position:fixed;top:0;left:0;z-index:1987;width:100%;height:100%;background:#000;filter:alpha(opacity=70);opacity:0.7;}* html{background:url(*) fixed;}* html body{margin:0;height:100%;}* html #pageOverlay{position:absolute;left:expression(documentElement.scrollLeft+documentElement.clientWidth-this.offsetWidth);top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight);}</style><script language="javascript">(function(){// 获取对象var $ = function (id){return document.getElementById(id);};// 遍历var each = function(a, b) {for (var i = 0, len = a.length; i < len; i++) b(a[i], i);};// 事件绑定var bind = function (obj, type, fn) {if (obj.attachEvent) {obj['e' + type + fn] = fn;obj[type + fn] = function(){obj['e' + type + fn](window.event);}obj.attachEvent('on' + type, obj[type + fn]);} else {obj.addEventListener(type, fn, false);};};// 移除事件var unbind = function (obj, type, fn) {if (obj.detachEvent) {try {obj.detachEvent('on' + type, obj[type + fn]);obj[type + fn] = null;} catch(_) {};} else {obj.removeEventListener(type, fn, false);};};// 阻止浏览器默认行为var stopDefault = function(e){e.preventDefault ? e.preventDefault() : e.returnValue = false;};// 获取页面滚动条位置var getPage = function(){var dd = document.documentElement,db = document.body;return {left: Math.max(dd.scrollLeft, db.scrollLeft),top: Math.max(dd.scrollTop, db.scrollTop)};};// 锁屏var lock = {show: function(){$('pageOverlay').style.visibility = 'visible';var p = getPage(),left = p.left,top = p.top;// 页面鼠标操作限制this.mouse = function(evt){var e = evt || window.event;stopDefault(e);scroll(left, top);};each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {bind(document, o, lock.mouse);});// 屏蔽特定按键: F5, Ctrl + R, Ctrl + A, Tab, Up, Downthis.key = function(evt){var e = evt || window.event,key = e.keyCode;if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 9) || (key == 38) || (key == 40)) {try{e.keyCode = 0;}catch(_){};stopDefault(e);};};bind(document, 'keydown', lock.key);},close: function(){$('pageOverlay').style.visibility = 'hidden';each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {unbind(document, o, lock.mouse);});unbind(document, 'keydown', lock.key);}};bind(window, 'load', function(){$('btn_lock').onclick = function(){lock.show();};$('pageOverlay').onclick = function(){lock.close();};});})();</script></head><body><button id="btn_lock" style="position:absolute;left:50%;top:40%;">开启锁屏</button><ol id="test"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ol><div id="pageOverlay"></div></body></html>

下面一段代码是用js写的登录遮罩效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>遮罩</title><style>#blanks{display:none;width:100%;//height:100%;height:100px;position:absolute;top:0;background-color:#ccc;z-index:1000;-moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}#login{padding:18px;display:none;background-color:pink;width:300px;height:100px;position:absolute;left:400px;top:20%;z-index:1001;}</style></head><body onload="setHeight()"><div id="content"><input type="button" value="登陆" onclick="showLogin()"><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p><p>《人生》前15年左右都是些教学关卡，弱弱的，你还没法点“跳过”。作为一个初来乍到的新手，你有大把的时间和用不完的精力，但几乎毫无经验。你会发现游戏的大多数元素，像什么牛逼的工作啦，财富啦，伴侣啦都还没有解锁，一直到你真正拥有了它们。这段时间，你的技能升级得非常快。在之后的游戏中，你再也不可能像这个阶段一样时间充裕而且精力充沛。如果想要玩出水平，最重要的是要把时间安排得尽可能合理。你的任何一个行动都会改变你的状态和技能</p></div><div id="blanks"></div><div id="login"><form method="post">用户名：<input type="text" name="username" ><br/>密  码：<input type="password" name="password"><br/><input type="submit" value="提交"></form><div id="btnclose" style="position:absolute;left:93%;top:0%;z-index:5;"><img src="close.png" onclick="hidediv();"/></div></div></body></html><script type="text/javascript">function setHeight(){var h=document.documentElement.scrollHeight;document.getElementById("blanks").style.height=h+"px";}function hidediv(){document.getElementById("login").style.display="none";document.getElementById("blanks").style.display="none";}function showLogin(){document.getElementById("login").style.display="block";document.getElementById("blanks").style.display="block";}</script>

以上所述是基于JavaScript实现全屏透明遮罩div层锁屏效果的相关内容，希望对大家有所帮助。

基于JavaScript实现全屏透明遮罩div层锁屏效果

相关文章

JavaScript编写页面半透明遮罩效果的简单示例

lightBox 简易的全屏透明遮罩解决方法

利用js+css简单实现半透明遮罩弹窗

父页面显示遮罩层弹出半透明状态的dialog

HTML实现遮罩层的方法 HTML中如何使用遮罩层