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 相关文章推荐
JavaScript 封装Ajax传递的数据代码
Jun 05 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
AngularJS基础知识
Dec 21 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
详解Vue之父子组件传值
Apr 01 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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/05/21 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
利用React高阶组件实现一个面包屑导航的示例
2020/08/23 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
Python 支付整合开发包的实现
2019/01/23 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Python的scikit-image模块实例讲解
2020/12/30 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
英国玛莎百货新西兰:Marks & Spencer New Zealand
2019/07/21 全球购物
电气工程师岗位职责
2014/01/01 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
土地租赁协议书
2015/01/29 职场文书
公司年夜饭通知
2015/04/25 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
python中使用redis用法详解
2022/12/24 Redis