| 标题 | html弹出透明层事例大小可以设置也可以比例化 |
| 内容 | 代码如下: <!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>lightbox example</title> <style> * { margin:0; padding:0 } html, body { height: 100%; width: 100%; font-size:12px } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; padding: 6px 16px; border: 12px solid #d6e9f1; background-color: white; z-index:1002; overflow: auto; } .black_overlay { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color:#f5f5f5; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .close { float:right; clear:both; width:100%; text-align:right; margin:0 0 6px 0 } .close a { color:#333; text-decoration:none; font-size:14px; font-weight:700 } .con { text-indent:1.5pc; line-height:21px } </style> <script> function show(tag){ var light=document.getelementbyid(tag); var fade=document.getelementbyid('fade'); light.style.display='block'; fade.style.display='block'; } function hide(tag){ var light=document.getelementbyid(tag); var fade=document.getelementbyid('fade'); light.style.display='none'; fade.style.display='none'; } </script> </head> <body> <a href=javascript:void(0) onclick=show('light')>打开1</a> <a href=javascript:void(0) onclick=show('light2')>打开2</a> <div id=light class=white_content> <div class=close><a href=javascript:void(0) onclick=hide('light')> 关闭</a></div> <div class=con> 内容1 内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容 </div> </div> <div id=light2 class=white_content> <div class=close><a href=javascript:void(0) onclick=hide('light2')> 关闭</a></div> <div class=con> 内容2 </div> </div> <div id=fade class=black_overlay></div> </body> </html> 代码全在上面了，可以复制试试...弹出层的大小可以设置，也可以比例化 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。