js实现非常棒的弹出div
更新时间：2016年10月06日 07:13:59 作者：jcuan
这篇文章主要为大家详细介绍了js实现非常棒的弹出div，具有一定的参考价值，感兴趣的朋友可以参考一下
本文实例为大家分享了一个非常棒的弹出div，供大家参考，具体内容如下
<html>
<head>
<meta charset="utf-8" />
<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.6; opacity:.60; filter: alpha(opacity=60); }
.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>
<script>
function one(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function two(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}
</script>
</head>
<body>
<p>可以根据自己要求修改css样式
<a href="javascript:void(0)" onclick="one()">点击这里打开窗口</a>
</p>
<div id="light" class="white_content">
This is the lightbox content.
<a href="javascript:void(0)" onclick="two()">Close</a>
</div>
<div id="fade" class="black_overlay">
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家有所帮助，希望大家继续关注脚本之家的最新内容。
相关文章
给一个Flash加一个超链接,原想直接在object外直接套一个超链接即可，试了之后却发现不是这么回事2013-06-06
在浏览器中对于Dom的操作和普通的脚本的操作处于两个不同的dll中，两个dll的交互是比较耗时的，优化对Dom的操作可以提高脚本的执行速度。本文是对如何优化的一些总结。下面跟着小编一起来看下吧2017-01-01
详解addEventListener的三个参数之useCapture
本文主要给大家介绍的是addEventListener的三个参数之中的useCapture参数的使用及示例分享，有需要的小伙伴参考下2015-03-03
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）下面为大家介绍下js的Boolean对象初始值2014-03-03
移动div对于很多的网有们来说是一件很熟悉的事了，本文老生长谈，用js实现鼠标移动div，希望大伙们可以举一反三，感兴趣的朋友可以参考下，或许本文对你有所帮助2013-01-01
这篇文章主要介绍了js实现图片预加载的方法，内容很详细，带领大家全面认识js图片预加载模块，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了JS简单测试循环运行时间的方法,涉及针对javascript中for循环、for...in循环及foreach循环的相关使用方法及运行时间测试,需要的朋友可以参考下2016-09-09
今天小编就为大家分享一篇layer弹出层倒计时关闭的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了javascript实现移动端红包雨页面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
现代Web开发中,JavaScript不仅是网页交互的核心,而且已经成为实现复杂前端功能的重要工具,本文将展示如何使用JavaScript构建一个动态数据可视化仪表板,需要的可以参考下2024-02-02
最新评论