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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
easyui validatebox验证
Apr 29 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
Oct 09 Javascript
vue项目支付功能代码详解
Feb 18 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设计模式 Factory(工厂模式)
2011/06/26 PHP
PHP内置的Math函数效率测试
2014/12/01 PHP
PHP中preg_match正则匹配中的/u、/i、/s含义
2015/04/17 PHP
PHP学习笔记之session
2018/05/06 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
javascript编程起步(第五课)
2007/02/27 Javascript
插件:检测javascript的内存泄漏
2007/03/04 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
node.js中的fs.mkdir方法使用说明
2014/12/17 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python中bisect模块用法实例
2014/09/25 Python
Python3 元组tuple入门基础
2020/02/09 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
求职简历自荐信范文
2013/10/21 职场文书
鲜果饮品店创业计划书
2014/01/21 职场文书
我的长生果教学反思
2014/04/28 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
Vue的过滤器你真了解吗
2022/02/24 Vue.js
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫