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>
以上就是本文的全部内容，希望对大家有所帮助，希望大家继续关注脚本之家的最新内容。
相关文章
这篇文章介绍了去掉gridPanel表头全选框的小例子，有需要的朋友可以参考一下2013-07-07
这篇文章主要介绍了BootStrap智能表单实战系列(七)验证的支持 ,凡是涉及到用户编辑信息然后保存的页面，都涉及到一个数据是否符合要求的检查，需要客服端和服务器端的校验的问题，本文介绍非常详细，具有参考价值，需要的朋友可以参考下2016-06-06
这篇文章主要介绍了JavaScript命名空间模式,结合实例形式分析了javascript命名空间模式的相关概念、原理、实现方法及操作注意事项,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了Javascript作用域和作用域链原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了js实现上传图片预览的方法,通过自定义函数结合onchange方法实现上传图片的预览功能,非常具有实用价值,需要的朋友可以参考下2015-02-02
这篇文章主要为大家分享了非常酷炫的Bootstrap图片轮播动画，几行jQuery和animate.css库用在基本的Bootstrap轮播组件中，感兴趣的小伙伴们可以参考一下2016-05-05
模块化简单来说就是将一个完整的长篇代码文件根据功能进行划分成几个文件，这些文件各自负责一个独立的功能，各个文件组合起来实现一个完整的大功能，这就是模块化，每个负责独立功能的文件就是模块。2021-05-05
这篇文章主要介绍了es6 js 匹配两个数组对象的方法,实例代码介绍了判断两个数组用的value是否相等，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
javascript 汉字与拼音转换...2007-02-02
这篇文章主要为大家详细介绍了js实现文字滚动的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
最新评论