<!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. SQL编程之高级查询(子查询)以及注意事项

    SQL编程之高级查询(子查询)以及注意事项   1.什么是子查询? 当一个查询是另一个查询的条件时,称之为子查询.子查询可以使用几个简单命令构造功能强大的复合命令.子查询最常用于SELECT-SQL命 ...

  2. 快速排序算法(Java)

    快速排序算法的基本思想是:通过一趟排序将待排记录分割成独立的两部分,其中一部分记录的关键字均比另外一部分记录的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序. class Parti ...

  3. [团队项目]sprint3 & 团队贡献分。

    希望各组认真准备,拿出最好的阵容最好的状态,展示一学期的学习与工作成果. 各组注意完成sprint3的博客,写上团队贡献分. 将演示PPT(如果有)和代码上传到github. 截止日期:2016.6. ...

  4. sql语句返回主键SCOPE_IDENTITY()

    在sql语句后使用 SCOPE_IDENTITY() 当然您也可以使用 SELECT @@IDENTITY 但是使用 SELECT @@IDENTITY是去全局最新. 有可能取得值不正确. 示例:in ...

  5. 多校赛3- Solve this interesting problem 分类: 比赛 2015-07-29 21:01 8人阅读 评论(0) 收藏

    H - Solve this interesting problem Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I ...

  6. 华东交通大学2016年ACM“双基”程序设计竞赛 1009

    Problem Description 华盛顿在寝室洗衣服,遭到了xyf的嫌弃,于是xyf出了道题给华盛顿来做(然而并没有什么关系-v-!)xyf扔给华盛顿n个字符串,这些字符串的长度不超过10000 ...

  7. 2016年11月6日 星期日 --出埃及记 Exodus 19:22

    2016年11月6日 星期日 --出埃及记 Exodus 19:22 Even the priests, who approach the LORD, must consecrate themselv ...

  8. c#启动EXE文件(简单的)

    在程序执行中会遇到启动本软件的exe问,或者启用其它的exe文件,已达到执行某些操作的作用.下面是两种最常见的启动exe文件. 1.调用系统dll使用其提供的方法. 引用的dll, [DllImpor ...

  9. Linux 性能监测:介绍

    看了某某教程.读了某某手册,按照要求改改某某设置.系统设定.内核参数就认为做到系统优化的想法很傻很天真:)系统优化是一项复杂.繁琐.长期的 工作,优化前需要监测.采集.测试.评估,优化后也需要测试.采 ...

  10. 中国特色社会主义的体制中有这样的现象:地方省政府要坚持党的领导和按 照国务院的指示进行安全生产。请编写一个java应用程序描述上述的体制现象。

    package a; public interface CentralPartyCommittee { void partyLeader(); } package a; public abstract ...