<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>点击文字弹出一个DIV层窗口代码</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p>
<div id="light" class="white_content">这是一个层窗口示例程序. <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>

Div层弹出的更多相关文章

  1. js弹出div层,弹出层页面底部出现UL出现一条线问题

    整个弹出div层,列表满一页时:底部会出现一条横线 原因:ul固定写在页面中了 解决方法: 将ul代码与li列表一样写在js中,如下 var newhtml = '<ul class=" ...

  2. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  3. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  4. JavaScript动态实现div窗口弹出&消失功能

    先积累一个JavaScript动态实现div窗口弹出&消失功能 首先是index.jsp代码 <html> <head> <link rel="styl ...

  5. div+js 弹出层

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

  7. layer iframe层弹出图片

    这个js是在一个layer iframe弹出层中,点击按钮弹出图片

  8. js遮罩层弹出显示效果组件化

    1.在web开发中经常遇到遮罩层的效果,可以将这种常用方法通用化 function showid(idname){ var isIE = (document.all) ? true : false; ...

  9. 69.js--点击事件等比例弹出层div

    html:<!--弹出层导航栏--> <div class="public-nav-content"> <ul> <li><a ...

随机推荐

  1. IE11 Enterprise Mode Template missing from GPMC

    IE11 Enterprise Mode Template missing from GPMC     Reason:You have not copied the new IE11 Enterpri ...

  2. 学习js的正确姿势

    轻松入门: http://dwz.cn/6yYLoo 全面理解: http://www.shouce.ren/api/view/a/1116 大师进阶: http://es6.ruanyifeng.c ...

  3. 2015-03-12——简析DOM2级样式

    CSSStyleSheet对象  表示某种类型的样式表CSSStyleRule对象  样式表中的每条规则 获得文档中的所有样式表document.styleSheets CSSStyleSheet对象 ...

  4. MongoDB资料汇总（转）

    原文:MongoDB资料汇总 上一篇Redis资料汇总专题很受大家欢迎,这里将MongoDB的系列资料也进行了简单整理.希望能对大家有用. 最后更新时间:2013-04-22 1.MongoDB是什么 ...

  5. requests 中response如何改变编码格式

    查看初始编码 首先查看拿到的response编码格式: (就不放代码了,因为此例需要用到cookie,可自行找个网站具体测试) 可见初始编码为:ISO-8859-1 修改编码 初始编码: 修改后编码: ...

  6. Pandas常用操作方法

    Pandas pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的. Pandas 纳入了大量库和一些标准的数据模型,提供了高效地操作大型数据集所需的工具. pandas提 ...

  7. 常见面试题整理--Python概念篇

    希望此文可以长期更新并作为一篇Python的面试宝典.每一道题目都附有详细解答,以及更加详细的回答链接.此篇是概念篇,下一篇会更新面试题代码篇. (一).这两个参数是什么意思:*args,**kwar ...

  8. 自己定义图片的progressbar

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/zpf8861/article/details/36183455 Android系统自带的Progre ...

  9. 001-es6变量声明、解构赋值、解构赋值主要用途

    一.基本语法 1.1.声明变量的六种方法 参看地址:http://es6.ruanyifeng.com/#docs/let let:局部变量,块级作用域,声明前使用报错 var:全局变量,声明前使用 ...

  10. SIP穿越NAT SIP穿越防火墙-SBC

    FireWall&NAT FireWall是一种被动网络安全防卫技术,位于网络的边界.在两个网络之间运行訪问控制策略.防止外部网络对内部信息资源的非法訪问,也能够阻止特定信息从内部网络被非法输 ...