一个简单的div弹出层的小例子
2017-04-18 10:08
405 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #login { display:none; border:1em solid #3366FF; height:30%; width:50%; position:absolute;/*让节点脱离文档流,我的理解就是,从页面上浮出来,不再按照文档其它内容布局*/ top:24%;/*节点脱离了文档流,如果设置位置需要用top和left,right,bottom定位*/ left:24%; z-index:2;/*个人理解为层级关系,由于这个节点要在顶部显示,所以这个值比其余节点的都大*/ background: white; } #over { width: 100%; height: 100%; opacity:0.8;/*设置背景色透明度,1为完全不透明,IE需要使用filter:alpha(opacity=80);*/ filter:alpha(opacity=80); display: none; position:absolute; top:0; left:0; z-index:1; background: silver; } </style> </head> <body> <a href="javascript:show()">弹出</a> <div id="login"> <a href="javascript:hide()">关闭</a> <div>这里是关闭弹窗的内容</div> </div> <div id="over"></div> </body> </html> <script type="text/javascript"> function show() { var login = document.getElementById('login'); var over = document.getElementById('over'); login.style.display = "block"; over.style.display = "block"; } function hide() { var login = document.getElementById('login'); var over = document.getElementById('over'); login.style.display = "none"; over.style.display = "none"; } </script>
相关文章推荐
- 一个十分简单的div弹出层小例子
- 一个最简单的js左右div分隔栏拖拽例子
- ligerui一个dialog弹div的简单例子(1.1.9)
- 这是一个dialog弹div的简单例子(1.1.9)
- 一个简单的弹出div,div里是一个表格
- 一个最简单的js左右div分隔栏拖拽例子
- 一个简单的div与span例子
- Struts 教程I:一个用jbuilder X 做的最简单的helloworld的struts例子
- 【转】一个用Visual C#做组件的简单例子
- 一个简单的XML Schema的例子
- VB Api简单入门(2)-一个简单的例子
- 用PHP开发GUI(一个简单的例子)
- 一个简单的IoC例子(抄袭)
- 一个简单的sturts-menu例子
- 软件开发中的矛盾——一个简单的例子
- Spring 入门(一个简单的例子)
- 一个简单的tcp filter的例子
- 今天的问题:一个简单的例子,请帮我解开“接口实现Java‘隐藏实现细目’”的迷惑。
- [Struts]学习日记1 - 一个简单的例子
- 一个简单的Eclipse插件开发的例子——HelloWorld【转载】