html 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>DIV CSS遮罩层</title>
<script language="javascript" type="text/javascript">
function showdiv() {
document.getElementById("bg").style.display = "block";
document.getElementById("show").style.display = "block";
}
function hidediv() {
document.getElementById("bg").style.display = 'none';
document.getElementById("show").style.display = 'none';
}
</script>
<style type="text/css">
#bg{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
#show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}
</style>
</head>
<body>
<input id="btnshow" type="button" value="Show" onclick="showdiv();" />
<div id="bg"></div>
<div id="show">测试
<input id="btnclose" type="button" value="Close" onclick="hidediv();" />
</div>
</body>
</html>
Copy上面的代码到HTML页面即可查看效果。
原理比较简单,就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时,通过JS去控制两个DIV的样式:display='block' or display='none'.就可以实现DIV的显示和隐藏。
注意两个DIV的z-index,显示在最上面的DIV的z-index一定要比遮罩层的z-index大。
html js 遮罩层的更多相关文章
- JS遮罩层弹框效果
对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹 ...
- js 遮罩层 loading 效果
//调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerSho ...
- js遮罩层弹出显示效果组件化
1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; ...
- JS遮罩层
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js 遮罩层请稍后
this.WaitMessage = function (msg) { $("<div class=\"datagrid-mask\"></div> ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 遮罩层的实现(纯js兼容版)
这个代码是我以前测试时候的代码了,主要用到的知识点是opacity和filer分别实现 “标准浏览器”和IE浏览器下的半透明,使用js的document.body.offsetwidth 和scree ...
- js添加遮罩层
直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...
随机推荐
- Linux下相关性能指标数据采集
1)如何查看某个服务进程所占本机物理内存及百分比情况?可以使用Linux命令行查看,也可以使用脚本实现.如下以查看本机kube-nginx服务进程为例: [root@kevin ~]# pidof k ...
- K8S 1.12大特性最快最深度解析:Kubernetes CSI Snapshot(上)
背景 许多存储系统提供了创建存储卷“快照”(snapshot)的能力,以防止数据丢失.快照可以替代传统的备份系统来备份和还原主要数据和关键数据.快照能够快速备份数据(例如,创建GCE PD快照仅需 ...
- 新一代纳秒级高带宽仿真工具平台——HAC Express
HAC Express是基于FPGA的模型仿真开发环境,专注于高精度建模和超高速实时仿真,弥补了传统仿真工具平台无法进行纳秒级仿真的短板. HAC系列自推出以来,经历了从v ...
- SQL Server 2005的几个新功能
SQL Server 2005相对于SQL Server 2000改进很大,有些还是非常实用的. 举几个例子来简单说明 这些例子我引用了Northwind库. 1. TOP 表达式 SQL Serv ...
- Hibernate初探之单表映射——创建Hibernate的配置文件
编写第一个Hibernate例子 第一步:创建Hibernate的配置文件 使用安装的Hibernate tools插件帮我们自动生成 如果在编辑的时候eclipse没有出现代码自动提示功能的话,我们 ...
- HTML5 Web SQL 数据库
呼和浩特seo:Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs. 如果你是一个 Web 后端程序员,应该 ...
- Codeforces Round #533 (Div. 2) D. Kilani and the Game(BFS)
题目链接:https://codeforces.com/contest/1105/problem/D 题意:p 个人在 n * m 的地图上扩展自己的城堡范围,每次最多走 a_i 步(曼哈顿距离),按 ...
- jquery手机端产品列表响应式宽高检测宽度赋值给高度让宽高相同
在手机端浏览商品列表,开发人员懂得设计图片做正好的尺寸,那样浏览很好,但有人天生泛懒图片都是随手上传不管大小合适不合适,要求还是响应式的.今天就用jquery检测宽度,并赋值给高度来实现错位问题 &l ...
- google Guava包的reflection(反射)解析
译者:万天慧(武祖) 由于类型擦除,你不能够在运行时传递泛型类对象——你可能想强制转换它们,并假装这些对象是有泛型的,但实际上它们没有. 举个例子: ArrayList<String> s ...
- TensorFlow(八):tensorboard可视化
import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data from tensorflow.c ...