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 相关文章推荐
比Jquery的document.ready更快的方法
Apr 28 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
详解js动态获取浏览器或页面等容器的宽高
Mar 13 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP 字符串操作入门教程
2006/12/06 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php中异常处理方法小结
2015/01/09 PHP
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
jquery控制页面部分刷新的方法
2015/06/24 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
微信小程序组件 marquee实例详解
2017/06/23 Javascript
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
vue下的@change事件的实现
2019/10/25 Javascript
Vue组件化开发之通用型弹出框的实现
2020/02/28 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
python 实现敏感词过滤的方法
2019/01/21 Python
python 安装移动复制第三方库操作
2020/07/13 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
《会变的花树叶》教学反思
2014/02/10 职场文书
殡葬服务心得体会
2014/09/11 职场文书
二手房购房协议书范本
2014/10/05 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
整改通知书格式
2015/04/22 职场文书
个人欠条范本
2015/07/03 职场文书
Python爬虫基础初探selenium
2021/05/31 Python
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android