模拟LightBox

scomouse

浏览: 14904 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (67)

社区版块

存档分类

重新写一遍其实这个东西整个页面只会有一个

所以根本就不需要用构造类来构造的写

直接写成对象就好了.........................

position:fixed 万恶的ie6不支持

scrollHeight是对象的内容的高度；
clientHeight是对象的可视部分高度；
offsetHeight是clientHeight加上border和滚动条本身高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>LightBox</title> </head> <body > <select> <option>testing</option> </select> <input value="show" type="button" onclick="ss()" /> <table width="1900" height="2000" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td> </td> </tr> </table> <script type="text/javascript"> var Sys = (function(ua){ var s = {}; s.IE = ua.match(/msie ([/d.]+)/)?true:false; s.Firefox = ua.match(/firefox//([/d.]+)/)?true:false; s.Chrome = ua.match(/chrome//([/d.]+)/)?true:false; s.IE6 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; s.IE7 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; s.IE8 = (s.IE&&([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; return s; })(navigator.userAgent.toLowerCase()); function $(id){return document.getElementById(id);}; function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)}; function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)}; function create(e,p,fn){var element = document.createElement(e); p.appendChild(element);fn&&fn(element);return element;}; function Extend(destination, source){ for (var property in source) { destination[property] = source[property]; } }; var Bind = function(object, fun) { var args = Array.prototype.slice.call(arguments).slice(2); return function() { return fun.apply(object, args); } }; var LightBox ={ obj : null, config :{ Color : "#fff", Opacity : 80, zIndex : 5 }, init : function(options){ Extend(this.config,options||{}); Extend(this,this.config); delete this.config; this.obj = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]); with(this.obj.style){ display = "none"; zIndex = this.zIndex; left = top = "0px"; position = "fixed"; width = height = "100%"; backgroundColor = this.Color; Sys.IE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100; }; if(Sys.IE6){ this.obj.style.position = "absolute"; var _self = this; this._resize = function(){ _self.obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; _self.obj.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)+"px"; }; //因为this._resize是让window的onresize事件调用的所以如果里面用this 就会指向window，一定得写成var _self=this 在this.resize里面用_self this.obj.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'; } }, Show : function(){ if(Sys.IE6){this._resize(); addListener(window,"resize", this._resize); } this.obj.style.display = "block"; }, Close : function(){ this.obj.style.display = "none"; removeListener(window,"resize", this._resize); } } window.onload = function(){ LightBox.init(); }; function ss(){ LightBox.Show(); }; </script> </body> </html>

jquery版本

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>smipleChart</title>
<style type="text/css">
.lightBox{
	background-color:#000;
	opacity : 0.6;
	z-index:10;
	display:none;
	position:fixed;
	_position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	filter:alpha(opacity=60)
}
</style>
</head>
<body >
<input value="xxx" type="button" onClick="$.lightBox.show()">
<script src="jquery.js" type="text/javascript"></script>
<script  type="text/javascript">
$.lightBox = function(docElem){
	var ie6 =$.browser.msie && $.browser.version==="6.0";
	return {
		init : function(css){
			var body = document.body;
			this.elem = $(body.insertBefore(document.createElement("div"), body.childNodes[0]))
						.addClass("lightBox")
						.css(css||{});		
			if(ie6){
				var elem = this.elem;
				elem.css("position","absolute")
					.html('<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>');				
				this._resize = function(){
					elem.css({
						width  : Math.max(docElem.scrollWidth, docElem.clientWidth) + "px",
						height : Math.max(docElem.scrollHeight, docElem.clientHeight)+"px"
					});
				}
			}
		},
		show : function(){
			if(ie6){
				this._resize();
				$(window).bind("resize.lightBox",this._resize);
			}
			this.elem.show();
		},
		close : function(){
			ie6
				&&$(window).unbind("resize.lightBox");
			this.elem.hide();
		}
	}
}(document.documentElement);
	$(document).ready(function(){
		jQuery.lightBox.init();
		$(document).bind("keydown",function(e){
			if(e.keyCode == "27")
				jQuery.lightBox.close();
		});
	})
</script>
<br>asdasdasd
<br>1111111111
<select><option>1111</option><option>2222</option></select>
<table width="1900" border="0" cellspacing="1" cellpadding="1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

</body>
</html>

分享到：

Dialog二 | 模拟Dialog

2009-06-08 00:32
浏览 208
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

模拟LightBox

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

模拟LightBox

评论

发表评论

相关推荐

最近访客更多访客>>