Chinaunix首页 | 论坛 | 博客

IT民工窝棚qbq.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

qbq

  • 博客访问： 30462443
  • 博文数量： 708
  • 博客积分： 12163
  • 博客等级： 上将
  • 技术积分： 8240
  • 用 户 组： 普通用户
  • 注册时间： 2007-12-04 20:59
文章分类

全部博文（708）

推荐博文
相关博文
Pop up image

分类： Java

2011-11-14 11:45:41

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="">
  3.  <head>
  4.   <title> LightBox </title>
  5.   <style type="text/css">
  6.   #box {
  7.     text-align:right;
  8.     background-color: #fff;
  9.     border: 20px solid #000000;
  10.   }
  11.   </style>
  12.  </head>
  13.  <body>
  14.  <script type="text/javascript">
  15.     var $ = function(id){
  16.         return 'string' == typeof id ? document.getElementById(id) : id;
  17.     }

  19.     var $d = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;

  21.     var isIE = navigator.userAgent.indexOf('MSIE') != -1;
  22.     var isIE6 = navigator.userAgent.indexOf('MSIE 6.0') != -1;
  23.     isIE6 && document.execCommand('BackgroundImageCache', false, true);

  25.     var Extend = function(destination, source){
  26.         for(var pro in source){
  27.             destination[pro] = source[pro];
  28.         }
  29.         return destination;
  30.     }

  32.     function addEvent(oTarget, sType, fnHandler){
  33.         if(window.attachEvent){
  34.             oTarget.attachEvent("on"+sType, fnHandler);
  35.         }else if(window.addEventListener){
  36.             oTarget.addEventListener(sType, fnHandler, false);
  37.         }else{
  38.             oTarget["on"+sType] = fnHandler;
  39.         }
  40.     }

  42.     function removeEvent(oTarget, sType, fnHandler){
  43.         if(window.detachEvent){
  44.             oTarget.detachEvent("on"+sType, fnHandler);
  45.         }else if(window.removeEventListener){
  46.             oTarget.removeEventListener(sType, fnHandler, false);
  47.         }else{
  48.             oTarget["on"+sType] = null;
  49.         }
  50.     }

  52.     function setOpacity(obj, o){
  53.         if(!obj.currentStyle || !obj.currentStyle.hasLayout) obj.style.zoom = 1;
  54.         if(!!isIE)obj.style.filter = 'alpha(opacity=' + Math.round(o) + ')';
  55.         else obj.style.opacity = o / 100;
  56.     }

  58.     var Bind = function(object, fun){
  59.         return function(){
  60.             fun.apply(object, arguments);
  61.         }
  62.     }

  64.     var Class = {
  65.         create: function(){
  66.             return function(){
  67.                 this.initialize.apply(this, arguments);
  68.             }
  69.         }
  70.     }

  72.     var OverLay = Class.create();
  73.     OverLay.prototype = {
  74.         initialize: function(options){
  75.             this.SetOptions(options);
  76.             Extend(this, this.options);
  77.             this.Lay = document.body.insertBefore(document.createElement('div'), document.body.childNodes[0]);
  78.             with(this.Lay.style){
  79.                 position = 'fixed';left = top = '0px';width = height = '100%';zIndex = parseInt(this.zIndex);
  80.                 backgroundColor = this.bgColor;display = 'none';
  81.             }
  82.             if(isIE6){
  83.                 this.Lay.style.position = 'absolute';
  84.                 this._resize = Bind(this, function(){
  85.                     this.Lay.style.width = Math.max($d.clientWidth, $d.scrollWidth) + "px";
  86.                     this.Lay.style.height = Math.max($d.clientHeight, $d.scrollHeight) + "px";
  87.                 });
  88.                 this.Lay.innerHTML += "";
  89.             }
  90.         },

  92.         Show: function(){
  93.             if(isIE6){this._resize();addEvent(window,'resize',Bind(this, this._resize))};
  94.             setOpacity(this.Lay, this.opacity);
  95.             this.Lay.style.display = "block";
  96.         },

  98.         SetOptions: function(options){
  99.             this.options = {
  100.                 bgColor: "#000000",
  101.                 opacity: 80,
  102.                 zIndex: 1000
  103.             };
  104.             Extend(this.options, options || {});
  105.         },

  107.         Close: function(){
  108.             this.Lay.style.display = "none";
  109.             isIE6 && removeEvent(window,'resize',Bind(this,this._resize));
  110.         }
  111.     }

  113.     var LightBox = Class.create();
  114.     LightBox.prototype = {
  115.         initialize: function(boxId, options){
  116.             this.Box = $(boxId);
  117.             this.Lay = new OverLay();
  118.             this.SetOptions(options);
  119.             Extend(this, this.options);

  121.             this.Box.style.display = "none";
  122.             this.Box.style.zIndex = parseInt(this.Lay.zIndex) + 1;
  123.             if(isIE6){
  124.                 this._top = this._left = 0;
  125.                 this._fixed = Bind(this, function(){ this.isCenter ? this.SetCenter() : this.FixScroll(); });
  126.             }
  127.         },

  129.         SetCenter: function(){
  130.             this.Box.style.marginLeft = $d.scrollLeft - this.Box.offsetWidth / 2 + "px";
  131.             this.Box.style.marginTop = $d.scrollTop - this.Box.offsetHeight / 2 + "px";
  132.         },

  134.         FixScroll: function(){
  135.             this.Box.style.top = $d.scrollTop - this._top + this.Box.offsetTop + "px";
  136.             this.Box.style.left = $d.scrollLeft - this._left + this.Box.offsetLeft + "px";
  137.             this._top = $d.scrollTop; this._left = $d.scrollLeft;
  138.         },

  140.         Show: function(){
  141.             this.hasLayer && this.Lay.Show();
  142.             this.Box.style.position = this.isScroll && !isIE6 ? 'fixed' : 'absolute';
  143.             this.Box.style.display = "block";
  144.             if(this.isCenter){
  145.                 this.Box.style.left = "50%"; this.Box.style.top = "50%";
  146.                 if(this.isScroll){
  147.                     this.Box.style.marginLeft = -this.Box.offsetWidth / 2 + "px";
  148.                     this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
  149.                 }else {
  150.                     this.SetCenter();
  151.                 }
  152.             }else{
  153.                 this.Box.style.left = "20%"; this.Box.style.top = "10%";
  154.             }
  155.             if(isIE6){
  156.                 this.isCenter ? this.SetCenter() : this.isScroll && this.FixScroll();
  157.                 this.isScroll && addEvent(window,'scroll',this._fixed);
  158.             }

  160.         },

  162.         SetOptions: function(options){
  163.             this.options = {
  164.                 hasLayer: true,
  165.                 isCenter: true,
  166.                 isScroll: true
  167.             };
  168.             Extend(this.options, options || {});
  169.         },

  171.         Close: function(){
  172.             this.Box.style.display = "none";
  173.             this.Lay.Close();
  174.         }
  175.     }
  176.  </script>
  177.   <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  178.  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  179.   <div id="openbtn"><img src="/images/forpopup.jpg"/></div>
  180.   <div id="box">
  181.     <img src="/images/forpopup.jpg"/></br>
  182.     <span id="clobtn">
  183.         <img src='/images/close.gif'/>
  184.     </span>
  185.   </div>
  186.  <select style="width:100px;">
  187.     <option value="" selected="selected">Test IE6</option>
  188.  </select>
  189.  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  190.  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  191.  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  192.  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  193.   <script type="text/javascript">
  194.     var box = new LightBox('box');
  195.     $('openbtn').onclick = function(){
  196.         box.Show();
  197.     }
  198.     $('clobtn').onclick = function(){
  199.         box.Close();
  200.     }
  201.   </script>
  202.  </body>
  203. </html>
阅读(1216) | 评论(0) | 转发(0) |
0

上一篇：千位格式化

下一篇：DragDrop

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6