编程 Javascript

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>

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

js实现非常棒的弹出div

- Author -

jcuan

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

ExtJs中简单的登录界面制作方法

Aug 19 Javascript

instanceof和typeof运算符的区别详解

Jan 06 Javascript

JavaScript使用setTimeout实现延迟弹出警告框的方法

Apr 07 Javascript

js实现的四级左侧网站分类菜单实例

May 06 Javascript

下雪了 javascript实现雪花飞舞

Aug 02 Javascript

深入理解javascript作用域第二篇之词法作用域和动态作用域

Jul 24 Javascript

微信小程序 picker-view 组件详解及简单实例

Jan 10 Javascript

实例详解display:none与visible:hidden的区别

Mar 30 Javascript

微信小程序循环及嵌套循环的使用总结

Sep 26 Javascript

详解js访问对象的属性和方法

Oct 25 Javascript

微信小程序iOS下拉白屏晃动问题解决方案

Oct 12 Javascript

使用vue-cli4.0快速搭建一个项目的方法步骤

Dec 04 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