<!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. Run as ant build每次都执行两次-问题解决

    在Eclipse里面,运行ant,整个测试流程总是执行两遍,其几天试了下在DOS命令行直接调用ant, 结果发现只执行了一次,并且内存消耗好像也没那么大了,估计是eclipse自己的问题.问题解决了, ...

  2. 2.sql server的管理

    sql server的管理:需要安装sql server 2005或者sql server 2008,若要使用sqlserver管理工具进行开发还要安装sql server management st ...

  3. 设置浏览器让js报错

    ie-工具---internet选项--高级--“禁用脚本提示”前面那个框的勾去掉---“显示每个脚本错误的通知”给该项打勾 注意:此时是静态页面很容易提示出错误的行号,但是当js是动态页面的时候,浏 ...

  4. 【Linux】磁盘分区

    我们在Linux操作过程中,可能会遇到磁盘分区的问题.这篇文章是对/dev/sdb 这块磁盘进行分区. linux分区不同于windows,linux下硬盘设备名为(IDE硬盘为hdx(x为从a—d) ...

  5. 设置Hadoop的 dataNode的单个Map的内存配置

    1.进入hadoop的配置目录 ,找到 环境变量的 $HADOOP_HOME cd $HADOOP_HOME 2.修改dataNode 节点的 单个map的能使用的内存配置 找到配置的文件: /opt ...

  6. swiper和Navigator组件

    <swiper class="index-banner" indicator-dots="{{true}}" autoplay="{{true} ...

  7. mac系统下安装、启动、停止mongodb

    mongodb是非关系型数据库,mysquel是关系型数据库,前者没有数据表这个说法,后者有 一. 下载nodejs,安装,一直到 node -v显示版本号,表示安装成功. 二. 本文主要讲解,安装包 ...

  8. vue中eventbus 多次触发的问题

    相比于react,vue是一个更上手很快的框架.所说简单易用,但在做Vue项目的过程中,就会发现,坑还是有的.组件之间传递数据是一个常见的需求,父子组件传递数据在官网有介绍,除了父子组件,一般地,任意 ...

  9. Git创建本地分支并关联远程分支（一）

    默认,git项目只有一个分支,就是master,我们当然可以在本地创建多个分支,并推送到远程git管理平台上,或者将远程git管理平台上的其他分支拉取到自己电脑上. 一.查看本地已有的分支 进入到项目 ...

  10. appium的等待

    在自动化过程中,元素出现受网络环境,设备性能等多种因素影响.因此元素加载的时间可能不一致,从而会导致元素无法定位超时报错,但是实际上元素是正常加载了的,只是出现时间晚一点而已.那么如何解决这个问题呢? ...