您的位置：首页 > Web前端 > JavaScript

Js仿弹框

2015-06-02 23:25 661 查看

收藏一个简单实用的JS弹框，通过隐藏和显示div来实现，代码来自脚本之家！

<html>
<head>
<title>
LIGHTBOX EXAMPLE
</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=80); } .white_content { display:
none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%;
padding: 16px; border: 16px solid orange; background-color: white; z-index:1002;
overflow: auto; }
</style>
</head>

<body>
<p>
可以根据自己要求修改css样式
<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">
This is the lightbox content.
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
Close
</a>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航