方法一：
Code//获取dom元素
function $() {
if (arguments.length == 1) return get$(arguments[0]);
var elements = [];
$c(arguments).each(function(el){
elements.push(get$(el));
});
return elements;
function get$(el){
if (typeof el == 'string') el = document.getElementById(el);
return el;
}
};
//div 折叠
function displayDiv(obj)
{
if(obj.className == "div_c3")
{
obj.className = "div_c4";
}
else
obj.className = "div_c3";
}
var obj = new Object;
var objText = new Object;
function oload(){
obj = document.getElementById('PopWin');
obj.style.display = 'none';
objText = document.getElementById('PopText');
objText.style.display = 'none';
}
function cl(contentId){
$('PopText').innerHTML = $(contentId).innerHTML;
// var top= document.documentElement.scrollTop;
// var left= document.documentElement.scrollLeft;
window.scrollTo(0, 0);
document.body.style.overflow = 'hidden';
document.body.style.height = document.documentElement.clientHeight + 'px';
document.body.style.width = document.documentElement.clientWidth + 'px';
obj.style.display = 'block';
objText.style.display = 'block';
objText.style.left=(document.documentElement.clientWidth-objText.offsetWidth)/2 + 'px';
objText.style.top=(document.documentElement.clientHeight-objText.offsetHeight)/2 + 'px';
obj.style.height = document.documentElement.clientHeight + 'px';
}
function bcl(){
document.body.style.overflow = '';
obj.style.display = 'none';
objText.style.display = 'none';
}
HTML：
<a onclick="cl('pwtextFriend'); return false;" href="javascript:;">出发事件</a>
<div id="pwtextFriend">
要加入的内容（Html代码),代码中加入调用bcl()的链接，以关闭窗口。
</div>
方法二：
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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JavaScript 仿LightBox内容显示效果</title></head><body><br /><br /><br /><br /><script>
var isIE = (document.all) ? true : false;var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
function Each(list, fun){ for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};var $ = function (id) { return "string" == typeof id ? document.getElementById(id) : id;};var Class = { create: function() { return function() { this.initialize.apply(this, arguments); } }}Object.extend = function(destination, source) { for (var property in source) { destination[property] = source[property]; } return destination;}Function.prototype.bind = function(object) { var __method = this, args = Array.apply(null, arguments); args.shift(); return function() { return __method.apply(object, args); }}var OverLay = Class.create();OverLay.prototype = { initialize: function(overlay, options) { this.Lay = $(overlay);//覆盖层 //ie6设置覆盖层大小程序 this._size = function(){}; this.SetOptions(options); this.Color = this.options.Color; this.Opacity = parseInt(this.options.Opacity); this.zIndex = parseInt(this.options.zIndex); this.Set(); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Color: "#fff",//背景色 Opacity: 50,//透明度(0-100) zIndex: 1000//层叠顺序 }; Object.extend(this.options, options || {}); }, //创建 Set: function() { this.Lay.style.display = "none"; this.Lay.style.zIndex = this.zIndex; this.Lay.style.left = this.Lay.style.top = 0; if(isIE6){ this.Lay.style.position = "absolute"; this._size = function(){ this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"; }.bind(this); //遮盖select this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>' } else { this.Lay.style.position = "fixed"; this.Lay.style.width = this.Lay.style.height = "100%"; } }, //显示 Show: function() { //设置样式 this.Lay.style.backgroundColor = this.Color; //设置透明度 if(isIE){ this.Lay.style.filter = "alpha(opacity:" + this.Opacity + ")"; } else { this.Lay.style.opacity = this.Opacity / 100; } //兼容ie6 if(isIE6){ this._size(); window.attachEvent("onresize", this._size); } this.Lay.style.display = "block"; }, //关闭 Close: function() { this.Lay.style.display = "none"; if(isIE6){ window.detachEvent("onresize", this._size); } }};var LightBox = Class.create();LightBox.prototype = { initialize: function(box, overlay, options) { this.Box = $(box);//显示层 this.OverLay = new OverLay(overlay, options);//覆盖层 this.SetOptions(options); this.Fixed = !!this.options.Fixed; this.Over = !!this.options.Over; this.Center = !!this.options.Center; this.onShow = this.options.onShow; this.Box.style.zIndex = this.OverLay.zIndex + 1; this.Box.style.display = "none"; //兼容ie6用的属性 if(isIE6){ this._top = this._left = 0; this._select = []; } }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Fixed: false,//是否固定定位 Over: true,//是否显示覆盖层 Center: false,//是否居中 onShow: function(){}//显示时执行 }; Object.extend(this.options, options || {}); }, //兼容ie6的固定定位程序 _fixed: function(){ var iTop = document.documentElement.scrollTop - this._top + this.Box.offsetTop, iLeft = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft; //居中时需要修正 if(this.Center){ iTop += this.Box.offsetHeight / 2; iLeft += this.Box.offsetWidth / 2; } this.Box.style.top = iTop + "px"; this.Box.style.left = iLeft + "px"; this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft; }, //显示 Show: function(options) { //固定定位 if(this.Fixed){ if(isIE6){ //兼容ie6 this.Box.style.position = "absolute"; this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft; window.attachEvent("onscroll", this._fixed.bind(this)); } else { this.Box.style.position = "fixed"; } } else { this.Box.style.position = "absolute"; } //覆盖层 if(this.Over){ //显示覆盖层，覆盖层自带select隐藏 this.OverLay.Show(); } else { //ie6需要把不在Box上的select隐藏 if(isIE6){ this._select = []; var oThis = this; Each(document.getElementsByTagName("select"), function(o){ if(oThis.Box.contains ? !oThis.Box.contains(o) : !(oThis.Box.compareDocumentPosition(o) & 16)){ o.style.visibility = "hidden"; oThis._select.push(o); } }) } } this.Box.style.display = "block"; //居中 if(this.Center){ this.Box.style.top = this.Box.style.left = "50%"; //显示后才能获取 var iTop = - this.Box.offsetHeight / 2, iLeft = - this.Box.offsetWidth / 2; //ie6或不是固定定位要修正 if(!this.Fixed || isIE6){ iTop += document.documentElement.scrollTop; iLeft += document.documentElement.scrollLeft; } this.Box.style.marginTop = iTop + "px"; this.Box.style.marginLeft = iLeft + "px"; } this.onShow(); }, //关闭 Close: function() { this.Box.style.display = "none"; this.OverLay.Close(); if(isIE6){ window.detachEvent("onscroll", this._fixed); Each(this._select, function(o){ o.style.visibility = "visible"; }); } }};function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; }};function removeEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType, fnHandler, false); } else if (oTarget.detachEvent) { oTarget.detachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = null; }};if(!isIE){ HTMLElement.prototype.__defineGetter__("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); });}//拖放程序var Drag = Class.create();Drag.prototype = { //拖放对象,触发对象 initialize: function(obj, drag, options) { var oThis = this; this._obj = $(obj);//拖放对象 this.Drag = $(drag);//触发对象 this._x = this._y = 0;//记录鼠标相对拖放对象的位置 //事件对象(用于移除事件) this._fM = function(e){ oThis.Move(window.event || e); } this._fS = function(){ oThis.Stop(); } this.SetOptions(options); this.Limit = !!this.options.Limit; this.mxLeft = parseInt(this.options.mxLeft); this.mxRight = parseInt(this.options.mxRight); this.mxTop = parseInt(this.options.mxTop); this.mxBottom = parseInt(this.options.mxBottom); this.mxContainer = this.options.mxContainer; this.onMove = this.options.onMove; this.Lock = !!this.options.Lock; this._obj.style.position = "absolute"; addEventHandler(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); }); }, //设置默认属性 SetOptions: function(options) { this.options = {//默认值 Limit: false,//是否设置限制(为true时下面参数有用,可以是负数) mxLeft: 0,//左边限制 mxRight: 0,//右边限制 mxTop: 0,//上边限制 mxBottom: 0,//下边限制 mxContainer: null,//指定限制在容器内 onMove: function(){},//移动时执行 Lock: false//是否锁定 }; Object.extend(this.options, options || {}); }, //准备拖动 Start: function(oEvent) { if(this.Lock){ return; } //记录鼠标相对拖放对象的位置 this._x = oEvent.clientX - this._obj.offsetLeft; this._y = oEvent.clientY - this._obj.offsetTop; //mousemove时移动 mouseup时停止 addEventHandler(document, "mousemove", this._fM); addEventHandler(document, "mouseup", this._fS); //使鼠标移到窗口外也能释放 if(isIE){ addEventHandler(this.Drag, "losecapture", this._fS); this.Drag.setCapture(); }else{ addEventHandler(window, "blur", this._fS); } }, //拖动 Move: function(oEvent) { //判断是否锁定 if(this.Lock){ this.Stop(); return; } //清除选择(ie设置捕获后默认带这个) window.getSelection && window.getSelection().removeAllRanges(); //当前鼠标位置减去相对拖放对象的位置得到offset位置 var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y; //设置范围限制 if(this.Limit){ //如果设置了容器,因为容器大小可能会变化所以每次都要设 if(!!this.mxContainer){ this.mxLeft = this.mxTop = 0; this.mxRight = this.mxContainer.clientWidth; this.mxBottom = this.mxContainer.clientHeight; } //获取超出长度 var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom; //这里是先设置右边下边再设置左边上边,可能会不准确 if(iRight > 0) iLeft -= iRight; if(iBottom > 0) iTop -= iBottom; if(this.mxLeft > iLeft) iLeft = this.mxLeft; if(this.mxTop > iTop) iTop = this.mxTop; } //设置位置 //由于offset是把margin也算进去的所以要减去 this._obj.style.left = iLeft - (parseInt(this._obj.currentStyle.marginLeft) || 0) + "px"; this._obj.style.top = iTop - (parseInt(this._obj.currentStyle.marginTop) || 0) + "px"; //附加程序 this.onMove(); }, //停止拖动 Stop: function() { //移除事件 removeEventHandler(document, "mousemove", this._fM); removeEventHandler(document, "mouseup", this._fS); if(isIE){ removeEventHandler(this.Drag, "losecapture", this._fS); this.Drag.releaseCapture(); }else{ removeEventHandler(window, "blur", this._fS); } }};
</script><style>.lightbox{}{width:300px;background:#FFFFFF; top:20%; left:20%;border:1px solid #ccc;line-height:25px; margin:0;}.lightbox dt{}{background:#f4f4f4; padding:5px; cursor:move;}</style><dl id="idBox" class="lightbox"> <dt id="idBoxHead"><b>LightBox</b> </dt> <dd> 选择效果显示 <br /><br /> <input name="" type="button" value=" 关闭 " id="idBoxCancel" /><br /><br /> </dd></dl><div id="idOverlay"></div><div style="margin:0 auto; width:700px; border:1px solid #000000;"><input name="" type="button" value="关闭覆盖层" id="btnOverlay" /><input name="" type="button" value="黑色覆盖层" id="btnOverColor" /><input name="" type="button" value="全透覆盖层" id="btnOverOpacity" /><input name="" type="button" value="取消居中" id="btnCenter" /><br /><br />选择效果：<br /><select id="idEffect"><option value="0">还原效果</option><option value="4">定位效果</option><option value="2">设置拖放</option><option value="6">视框定位拖放</option></select> <input name="" type="button" value=" 打开 " id="idBoxOpen" /><script>var box = new LightBox("idBox", "idOverlay", { Center: true });var drag = new Drag("idBox", "idBoxHead", { mxContainer: document.documentElement, Lock: true });$("idBoxCancel").onclick = function(){ box.Close(); }$("idBoxOpen").onclick = function(){ box.Show(); }$("idEffect").onchange = function(){ box.Close(); switch (parseInt(this.value)) { case 4 : box.Fixed = true; drag.Lock = true; drag.Limit = false; break; case 2 : box.Fixed = false; drag.Lock = false; drag.Limit = false; break; case 6 : box.Fixed = true;; drag.Lock = false; drag.Limit = true; break; case 0 : default : box.Fixed = false; drag.Lock = true; drag.Limit = false; }}$("btnOverlay").onclick = function(){ box.Close(); if(box.Over){ box.Over = false; this.value = "打开覆盖层"; } else { box.Over = true; this.value = "关闭覆盖层"; }}$("btnOverColor").onclick = function(){ box.Close(); box.Over = true; if(box.OverLay.Color == "#fff"){ box.OverLay.Color = "#000"; this.value = "白色覆盖层"; } else { box.OverLay.Color = "#fff" this.value = "黑色覆盖层"; }}$("btnOverOpacity").onclick = function(){ box.Close(); box.Over = true; if(box.OverLay.Opacity == 0){ box.OverLay.Opacity = 50; this.value = "全透覆盖层"; } else { box.OverLay.Opacity = 0; this.value = "半透覆盖层"; }}$("btnCenter").onclick = function(){ box.Close(); if(box.Center){ box.Center = false; this.value = "设置居中"; } else { box.Center = true; this.value = "取消居中"; }}</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 /></div></body></html>
浙公网安备 33010602011771号