js实现非常棒的弹出div


Posted in Javascript onOctober 06, 2016

本文实例为大家分享了一个非常棒的弹出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>

以上就是本文的全部内容,希望对大家有所帮助,希望大家继续关注三水点靠木的最新内容。

Javascript 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
javascript定时变换图片实例代码
Mar 17 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
vue下history模式刷新后404错误解决方法
Aug 18 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
jQuery事件用法详解
Oct 06 #Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 #Javascript
js改变html的原有内容实现方法
Oct 05 #Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 #Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 #Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 #Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 #Javascript
You might like
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
2011/10/30 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
鼠标悬停小图标显示大图标
2016/01/22 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
2017/04/11 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
webpack4的迁移的使用方法
2018/05/25 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
vue实现记事本功能
2019/06/26 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
django-filter和普通查询的例子
2019/08/12 Python
python实现在列表中查找某个元素的下标示例
2020/11/16 Python
社区母亲节活动记录
2014/03/06 职场文书
离职报告格式
2014/11/04 职场文书
见义勇为事迹材料
2014/12/24 职场文书
2015年办公室文秘工作总结
2015/04/30 职场文书
导游词之南京中山陵
2019/11/27 职场文书