<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#fade {
display:none;
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
background:black;
z-index:1001;
-moz-opacity:0.2;
opacity:0.2;
filter:alpha(opacity=80);
}
#light{
display:none;
position:absolute;
top:25%;
left:25%;
width:50%;
height:50%;
padding:16px;
border:3px solid orange;
background-color:white;
z-index:1002;
overflow:auto;
}
</style>
<script type="text/javascript">
window.onload=function(){
var linkbt=document.getElementById("linkbt");
var light=document.getElementById('light');
var fade=document.getElementById('fade');
var closebt=document.getElementById("closebt");
linkbt.onclick=function(){
light.style.display='block';
fade.style.display='block';
}
closebt.onclick=function(){
light.style.display='none';
fade.style.display='none';
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" id="linkbt"> 点击这里打开窗口</a>
<div id="light">
<a style="float:right;" href="javascript:void(0)" id="closebt">关闭</a>
</div>
<div id="fade""></div>
</body>
</html>

css+JS实现遮罩弹框的更多相关文章

  1. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. js+css jQuery实现页面后退执行 & 遮罩弹框

    JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> < ...

  3. JS 信息提示弹框封装

    // 功能提示弹框 function tipsBox ( option ) { var html = ''; if ( option.type == 'success' ) { html += '&l ...

  4. js alert(“”）弹框 自定义样式

    首先用css渲染一个样式 #msg{ height: 2rem; text-align: center; position: fixed; top: 50%; margin-top: -1rem; l ...

  5. js循环遍历弹框，先弹出第一个之后逐步弹出第二个。。

    var data = [{ "login_advertTitle": "即使生活琐碎,也要活得优雅", "login_advertCont" ...

  6. H5页面遮罩弹框下层还能滚动的问题

    在页面上显示一个遮罩层,这是非常常见的操作,在遮罩层上操作,下层也会默认跟随手指滚动 此处就是要在显示遮罩的时候禁止下层滚动. 首先设置一个全局变量 var canScroll=false; 页面初始 ...

  7. js实现删除弹框确认

    JSP页面代码如下: <%@ page language="java" contentType="text/html; charset=UTF-8"%&g ...

  8. div遮罩弹框口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. js页面的弹框怎么关闭啊

    1.单纯的关闭window.opener.location.reload(); //刷新父窗口中的网页window.close();//关闭当前窗窗口2.提交后关闭 function save(){d ...

随机推荐

  1. 约瑟夫问题 java

    约瑟夫环:已知n个人(以编号1,2,3...n分别表示)围坐在一张圆桌周围.从编号为k的人开始报数,数到m的那个人出列;他的下一个人又从1开始报数,数到m的那个人又出列;依此规律重复下去,直到圆桌周围 ...

  2. The trouble of Xiaoqian

    The trouble of Xiaoqian Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...

  3. 【TCP】超时与重传

    在TCP连接中假设发送方一开始便向网络发送多个报文段,直到达到接收方通告的窗口大小为止.当发送方和接收方处于同一个区域网段时,这种方式是可以的.但是如果发送方和接收方之间存在多个路由器和速率较慢的链路 ...

  4. Linux 文件操作总结

    http://blog.163.com/he_junwei/blog/static/19793764620152592737741/ ioctl?? lseek?? 文件是linux中的一个重要概念. ...

  5. shell脚本常见错误

    一.引言 想要学习使用shell脚本,却在开始的时候遇到很多不顺利,都是一些小细节的东西,所以在此记录一下. 二.各种细节问题 1.变量作为赋值对象时不需要添加$,取值时需要,也就是说,这个$就是取值 ...

  6. EF 增删改查

    StudentEntities entities = new StudentEntities(); //初始化对象 Register register = new Register(); #regio ...

  7. Duilib动画按钮实现(转载)

    转载:http://blog.csdn.net/cuiguanghui123/article/details/51674218 .h文件 #ifndef __UIBUTTONEX_H__ #defin ...

  8. TCP连接的状态详解以及故障排查

    我们通过了解 TCP各个状态 ,可以排除和定位网络或系统故障时大有帮助. 一.TCP状态 LISTENING :侦听来自远方的TCP端口的连接请求 . 首先服务端需要打开一个 socket 进行监听, ...

  9. 高通平台点亮LCD个人总结

    点击打开链接 高通平台LCD模块大致分为两部分:KERNEL和LK.在进行点屏之前,应该认真查看LCD原理图,弄清楚LCD亮屏需要满足的条件和上电时序,同时可以跟LCD IC原厂拿到初始化代码. 首先 ...

  10. 模板页显示Excel数据Gridview增删改查

    <%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" Au ...