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 load Page,load css,load js实现代码
Mar 31 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
vue单个组件实现无限层级多选菜单功能
Apr 10 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
vue结合element-ui使用示例
Jan 24 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 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
Terran兵种对照表
2020/03/14 星际争霸
PHP5 安装方法
2006/10/09 PHP
php获得文件扩展名三法
2006/11/25 PHP
利用discuz实现PHP大文件上传应用实例代码
2008/11/14 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php 魔术方法详解
2014/11/11 PHP
javascript使用中为什么10..toString()正常而10.toString()出错呢
2013/01/11 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
简单的js表格操作
2016/09/24 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
深入理解python多进程编程
2016/06/12 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
Pycharm安装python库的方法
2020/11/24 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
会计专业求职信范文
2014/03/16 职场文书
先进教师个人总结
2015/02/11 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
暂停营业通知
2015/04/25 职场文书
幼儿园班级工作总结2015
2015/05/25 职场文书
幼儿园国培研修日志
2015/11/13 职场文书
《灰雀》教学反思
2016/02/19 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
关于 Python json中load和loads区别
2021/11/07 Python
Go语言 详解net的tcp服务
2022/04/14 Golang