<!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. Halcon学习笔记之支持向量机（二）

    例程:classify_halogen_bulbs.hdev 在Halcon中模式匹配最成熟最常用的方式该署支持向量机了,在本例程中展示了使用支持向量机对卤素灯的质量检测方法.通过这个案例,相信大家可 ...

  2. HBase的集群搭建（1、3、5节点都适用）

    见 5 hbase-shell + hbase的java api

  3. 《CSS Mastery》读书笔记（2）

    第二章  目标的样式   要用CSS样式化一个HTML元素,必须要定位一个元素, CSS的选择器就是这样的手段. 这章中,你要学到的 • Common selectors 普通选择器 • Advanc ...

  4. 在窗体中把DataGridView中的数据导出Excel

    //DataGridView导出Excel private void bt_Excl_Click(object sender, EventArgs e) { SaveFileDialog saveFi ...

  5. Maven项目pom.xml配置详解

    maven项目pom.xml文件配置详解,需要时可以用作参考: <project xmlns="http://maven.apache.org/POM/4.0.0" xmln ...

  6. OpenVX

    OpenVX openvx  1. 编译 尝试编译openvx_sample,下载相关代码. 下载的sample code直接使用make可以生成libopenvx.so. 使用python Buil ...

  7. AI：IPPR的数学表示-CNN结构进化（Alex、ZF、Inception、Res、InceptionRes）

    前言: 文章:CNN的结构分析-------:  文章:历年ImageNet冠军模型网络结构解析-------: 文章:GoogleLeNet系列解读-------: 文章:DNN结构演进Histor ...

  8. Jsp页面中常用的EL表达式

    首先引入标签 <%@ page language="java" contentType="text/html; charset=utf-8"  pageE ...

  9. python 从Excel中取值

    import openpyxl from openpyxl import load_workbook def open_file(file_path): workbook = load_workboo ...

  10. eas之日期选择控件

    初始化打印控件KDPrinter ctrlPrinter = new KDPrinter(); 增加列 // 指定插入位置table.addColumn(index);// 插入到最后table.ad ...