<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>全屏div</title>

<style>

html,body {

    margin:0;

    height:100%;

}

#test {

    width:100%;

    height:100%;

    background-color:#000;

    position:absolute;

    top:0;

    left:0;

    z-index:2;

    opacity:0.3;

    /*兼容IE8及以下版本浏览器*/

    filter: alpha(opacity=30);

    display:none;

}

#log_window {

    width:200px;

    height:200px;

    background-color:#FF0;

    margin: auto;

    position: absolute;

    z-index:3;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    display:none;

}

</style>

<script>

function shield(){

    var s = document.getElementById("test");

    s.style.display = "block";

  //  var l = document.getElementById("log_window");

    //l.style.display = "block";

}

function cancel_shield(){

    var s = document.getElementById("test");

    s.style.display = "none";

    //var l = document.getElementById("log_window");

    //l.style.display = "none";

}

</script>

</head>

<body>

<a href="javascript:shield()">打开遮罩</a>

<div id="test"></div>

<div id="log_window">

<a href="javascript:cancel_shield()">关闭</a>

</div>

</body>

</html>

JS遮罩层的更多相关文章

  1. JS遮罩层弹框效果

    对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹 ...

  2. html js 遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 遮罩层 loading 效果

    //调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerSho ...

  4. js遮罩层弹出显示效果组件化

    1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; ...

  5. js 遮罩层请稍后

    this.WaitMessage = function (msg) { $("<div class=\"datagrid-mask\"></div> ...

  6. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  7. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 遮罩层的实现(纯js兼容版)

    这个代码是我以前测试时候的代码了,主要用到的知识点是opacity和filer分别实现 “标准浏览器”和IE浏览器下的半透明,使用js的document.body.offsetwidth 和scree ...

  9. js添加遮罩层

    直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...

随机推荐

  1. 改善用户体验 Web前端优化策略总结

    前端是庞大的,包括HTML.CSS.Javascript.Image.Flash等等各种各样的资源.前端优化是复杂的,针对方方面面的资源都有不同的方式.那么,前端优化的目的是什么? 1. 从用户角度而 ...

  2. 构造函数中this，return的详解

    function Foo(name,age){ this.name=name; this.age=age; } var foo=new Foo("Tom",14); foo.nam ...

  3. ajax 三级联动写法

    主页面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. SQL Server 一个简单的游标

    先看一下原表: DECLARE @id INT; DECLARE @name NVARCHAR(100); DECLARE c_department CURSOR FOR SELECT StuID, ...

  5. 【Oracle】DG中物理备库、快照备库的相互转换

    一.物理备库切换快照备库 1. 如果正在运行日志应用,先停止 ALTER DATABASE RECOVER MANAGED STANDBY DATABASE CANCEL; 2. 确保数据库为MOUN ...

  6. WEB笔记-2 剖析CSS规则

    2.1 剖析CSS规则   规则即指令,其声明了需要修改的元素及要应用给元素的样式.     2.2 为文档添加样式的三种方法   行内样式:直接写在HTML文档标签中的style属性当中,行内元素只 ...

  7. 大话数据结构pdf高清版下载

    大话数据结构PDF下载 不得不说严老师版的虽然比较经典,但是真的有点难理解啊,而大话数据结构这本书还是比较不错的,通俗易懂,反正我个人觉得很不错,希望对诸位有帮助. 链接:点击打开 密码:xovz p ...

  8. BZOJ1001 BJOI2006 狼抓兔子

    Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的,而且现在的兔子还比较笨,它们只有两个窝,现在你做为狼王,面对下面这样一个 ...

  9. 使用for或while循环来处理处理不确定页数的网页数据爬取

    本文转载自以下网站: Python For 和 While 循环爬取不确定页数的网页  https://www.makcyun.top/web_scraping_withpython16.html 需 ...

  10. Java 实现邮件发送功能

    1.新建model SendMail.java import java.util.Properties; public class SendMail { // 发送邮件的服务器的IP和端口 priva ...