JS弹出浮层
2016-02-24 21:06
519 查看
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS弹出浮层</title> <style type="text/css"> .my_div { background-color: #ff6; border: 1px solid #f90; text-align: center; line-height: 40px; font-size: 12px; font-weight: bold; z-index: 2; width: 600px; height: 220px; left: 50%; /*FF IE7*/ top: 50%; /*FF IE7*/ margin-left: -150px !important; /*FF IE7 该值为本身宽的一半 */ margin-top: -60px !important; /*FF IE7 该值为本身高的一半*/ margin-top: 0px; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression( eval(document.compatMode && document.compatMode == 'CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight) / 2 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) / 2 /*IE6*/ ); /*IE5 IE5.5*/ } .bg_div { background-color: #ccc; width: 100%; height: 100%; left: 0; top: 0; /*FF IE7*/ filter: alpha(opacity = 50); /*IE*/ opacity: 0.5; /*FF*/ z-index: 1; position: fixed !important; /*FF IE7*/ position: absolute; /*IE6*/ _top: expression( eval(document.compatMode && document.compatMode == 'CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight) / 2 : document.body.scrollTop + (document.body.clientHeight - this.clientHeight) / 2 /*IE6*/ ); /*IE5 IE5.5*/ } /*The END*/ </style> <script type="text/javascript"> function showDiv(){ document.getElementById('my_div').style.display='block'; document.getElementById('bg_div').style.display='block'; } function closeDiv(){ document.getElementById('my_div').style.display='none'; document.getElementById('bg_div').style.display='none'; } </script> </head> <body> <div id="my_div" class="my_div" style="display: none;"> 恭喜你!<br />你的成绩为:60分<br /> <a href="javascript:closeDiv()">关闭窗口</a> </div> <div id="bg_div" class="bg_div" style="display: none;"></div> <div style="padding-top: 20px;"> <input type="submit" name="" value="显示层" onclick="javascript:showDiv()" /> </div> </body> </html>
相关文章推荐
- 30 行代码实现 JS 中的 MVC
- angular js权威指南笔记五--模块加载、多重视图和路由
- javaScript滚动新闻之上下左右平滑滚动
- BZOJ1017: [JSOI2008]魔兽地图DotR
- JS正则表达式
- JSON对象处理总结
- JavaScript parseInt() 函数
- json解析之gson
- JSONModel解析数据成Model
- Json解析
- FastJSON自定义序列化-修改属性值
- 点击导航下的某个栏目,出现在相应区域;滚动到某个区域,导航下的某个栏目相应效果
- javaScript学习笔记(三)
- 入门js设计模式——构造函数模式
- JSPatch心得
- 常用的JSTL函数
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
- js中:json对象与字符串转化
- JavaScript 开发进阶:理解 JavaScript 作用域和作用域链
- 了解JavaScript 面向对象基础 & 原型与对象