<!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. PHP简单图片操作

    <?php //PHP操作图片需打开配置文件中 extension=php_gd2.dll //================================================= ...

  2. RecycleView使用的那些坑

    1.为条目设置margin值时,在6.0系统上会无效.此时在item的根外面套一层viewgroup解决. 2.当条目中有imageview时,必须给imageview设置 src或者backgrou ...

  3. 最全面的Java多线程用法解析

    1.创建线程 在Java中创建线程有两种方法:使用Thread类和使用Runnable接口.在使用Runnable接口时需要建立一个Thread实例.因此,无论是通过Thread类还是Runnable ...

  4. Windows下Apache+mod_python+Django配置

    Windows下Apache+mod_python+Django配置 Apache 首先要安装Apache,我安装的版本是2.2.*: Python python肯定是要安装的,我安装的版本是2.5的 ...

  5. 在javaEE下学习web（在eclipse中开发动态的WEB工程，servlet的环境搭建，及servlet的一些方法）

    一个简便的方法实现javaee版的eclipse开发动态的WEB工程(javaWEB项目)1.把开发选项切换到javaEE2. 可以在window->shou view 中找到package e ...

  6. 哈希-Gold Balanced Lineup 分类： POJ 哈希 2015-08-07 09:04 2人阅读 评论(0) 收藏

    Gold Balanced Lineup Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 13215 Accepted: 3873 ...

  7. Doubles 分类： POJ 2015-06-12 18:24 11人阅读 评论(0) 收藏

    Doubles Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 19954   Accepted: 11536 Descrip ...

  8. JAVA基础知识之JVM-——使用反射生成并操作对象

    Class对象可以获取类里的方法,由Method对象表示,调用Method的invoke可以执行对应的方法:可以获取构造器,由Constructor对象表示,调用Constructor对象的newIn ...

  9. ci 基础知识

    //建立虚拟主机 2.下载完毕后,解压,并将其复制粘贴到程序的主目录(d:/wamp/xmall/),然后再将其重命名为"myshop",那么"myshop" ...

  10. 使用UML进行项目开发

    一.概述 本文主要论述的内容是如何使用UML来指导(辅助)项目设计.在此篇文章中,假设读者对UML已经有了概念上的认识,对UML中出现的名词都能很好的理解. UML的目标是以面向对象图的方式来描述任何 ...