急求 一例DIV弹出层居中的实例大家帮我提供一个div层 弹出后在 屏幕的正中间不随滚动条的滚动而 滚动要 IE
急求 一例DIV弹出层居中的实例
大家帮我提供一个
div层 弹出后在 屏幕的正中间
不随滚动条的滚动而 滚动
要 IE FF 兼容的实例
佛祖啊 帮帮忙
希望大家不要复制网上的垃圾过来 最好给一个能用的~！@！！！！急急急急急急急急急
[解决办法]
- HTML code
<!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> <title> LightBox </title> <style type="text/css"> #box { text-align:right; background-color: #fff; border: 20px solid #000000; } </style> </head> <body> <script type="text/javascript"> <!-- var $ = function(id){ return 'string' == typeof id ? document.getElementById(id) : id; } var $d = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body; var isIE = navigator.userAgent.indexOf('MSIE') != -1; var isIE6 = navigator.userAgent.indexOf('MSIE 6.0') != -1; isIE6 && document.execCommand('BackgroundImageCache', false, true); var Extend = function(destination, source){ for(var pro in source){ destination[pro] = source[pro]; } return destination; } function addEvent(oTarget, sType, fnHandler){ if(window.attachEvent){ oTarget.attachEvent("on"+sType, fnHandler); }else if(window.addEventListener){ oTarget.addEventListener(sType, fnHandler, false); }else{ oTarget["on"+sType] = fnHandler; } } function removeEvent(oTarget, sType, fnHandler){ if(window.detachEvent){ oTarget.detachEvent("on"+sType, fnHandler); }else if(window.removeEventListener){ oTarget.removeEventListener(sType, fnHandler, false); }else{ oTarget["on"+sType] = null; } } function setOpacity(obj, o){ if(!obj.currentStyle || !obj.currentStyle.hasLayout) obj.style.zoom = 1; if(!!isIE)obj.style.filter = 'alpha(opacity=' + Math.round(o) + ')'; else obj.style.opacity = o / 100; } var Bind = function(object, fun){ return function(){ fun.apply(object, arguments); } } var Class = { create: function(){ return function(){ this.initialize.apply(this, arguments); } } } var OverLay = Class.create(); OverLay.prototype = { initialize: function(options){ this.SetOptions(options); Extend(this, this.options); this.Lay = document.body.insertBefore(document.createElement('div'), document.body.childNodes[0]); with(this.Lay.style){ position = 'fixed';left = top = '0px';width = height = '100%';zIndex = parseInt(this.zIndex); backgroundColor = this.bgColor;display = 'none'; } if(isIE6){ this.Lay.style.position = 'absolute'; this._resize = Bind(this, function(){ this.Lay.style.width = Math.max($d.clientWidth, $d.scrollWidth) + "px"; this.Lay.style.height = Math.max($d.clientHeight, $d.scrollHeight) + "px"; }); this.Lay.innerHTML += "<iframe style='position:absolute;left:0px;top:0px;widht:100%;height:100%;filter:alpha(opacity=0);z-index:-1'></iframe>"; } }, Show: function(){ if(isIE6){this._resize();addEvent(window,'resize',Bind(this, this._resize))}; setOpacity(this.Lay, this.opacity); this.Lay.style.display = "block"; }, SetOptions: function(options){ this.options = { bgColor: "#000000", opacity: 80, zIndex: 1000 }; Extend(this.options, options || {}); }, Close: function(){ this.Lay.style.display = "none"; isIE6 && removeEvent(window,'resize',Bind(this,this._resize)); } } var LightBox = Class.create(); LightBox.prototype = { initialize: function(boxId, options){ this.Box = $(boxId); this.Lay = new OverLay(); this.SetOptions(options); Extend(this, this.options); this.Box.style.display = "none"; this.Box.style.zIndex = parseInt(this.Lay.zIndex) + 1; if(isIE6){ this._top = this._left = 0; this._fixed = Bind(this, function(){ this.isCenter ? this.SetCenter() : this.FixScroll(); }); } }, SetCenter: function(){ this.Box.style.marginLeft = $d.scrollLeft - this.Box.offsetWidth / 2 + "px"; this.Box.style.marginTop = $d.scrollTop - this.Box.offsetHeight / 2 + "px"; }, FixScroll: function(){ this.Box.style.top = $d.scrollTop - this._top + this.Box.offsetTop + "px"; this.Box.style.left = $d.scrollLeft - this._left + this.Box.offsetLeft + "px"; this._top = $d.scrollTop; this._left = $d.scrollLeft; }, Show: function(){ this.hasLayer && this.Lay.Show(); this.Box.style.position = this.isScroll && !isIE6 ? 'fixed' : 'absolute'; this.Box.style.display = "block"; if(this.isCenter){ this.Box.style.left = "50%"; this.Box.style.top = "50%"; if(this.isScroll){ this.Box.style.marginLeft = -this.Box.offsetWidth / 2 + "px"; this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px"; }else { this.SetCenter(); } }else{ this.Box.style.left = "20%"; this.Box.style.top = "10%"; } if(isIE6){ this.isCenter ? this.SetCenter() : this.isScroll && this.FixScroll(); this.isScroll && addEvent(window,'scroll',this._fixed); } }, SetOptions: function(options){ this.options = { hasLayer: true, isCenter: true, isScroll: true }; Extend(this.options, options || {}); }, Close: function(){ this.Box.style.display = "none"; this.Lay.Close(); } } //--> </script> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <input type="button" id="openbtn" value="打开层" /> <div id="box" style="width:300px;height:300px;"> </br> <span id="clobtn"> <input type="button" value="关闭"/> </span> </div> <select style="width:100px;"> <option value="" selected="selected">Test IE6</option> </select> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <script type="text/javascript"> <!-- var box = new LightBox('box'); $('openbtn').onclick = function(){ box.Show(); } $('clobtn').onclick = function(){ box.Close(); } //--> </script> </body></html>
[解决办法]
CSS.CSS 文件
- CSS code
body{font-size:14px;margin:0px;}#open_div{position:absolute;background:#000;display:none;z-index:1000;border:#D2D2D2 1px solid;} .close{ margin:3px; float:right; width:15px; height:5px; background:transparent url(close.gif) no-repeat 0px 0px; cursor:pointer;}