<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>AlertBox 弹出层（信息提示框）效果</title> <script src="CJL.0.1.min.js"></script> <script src="AlertBox.js"></script> </head> <body style="width:900px; height:1000px; padding:100px;"><style> .lightbox{width:300px;background:#FFFFFF;border:5px solid #ccc;line-height:20px;display:none; margin:0;} .lightbox dt{background:#f4f4f4;padding:5px;} .lightbox dd{ padding:20px; margin:0;} </style> <input type="button" value="锁定屏幕" id="idOverlay" /> <input type="button" value="定位效果" id="idFixed" /> <input type="button" value="居中效果" id="idCenter" /> <select><option>覆盖select测试</option> </select> <input type="button" value=" 打开 " id="idBoxOpen" /> <span id="idMsg"></span> <br /> <dl id="idBox" class="lightbox" style="top:10%;left:5%;"><dt><b>AlertBox</b> </dt><dd><input type="text" value="正常输入" id="idBoxTxt"><input type="button" value=" 关闭 " id="idBoxClose" /></dd> </dl> <script> (function(){var ab = new AlertBox("idBox"), lock = false;//锁定键盘 function lockup(e){ e.preventDefault(); } //高亮层不锁定 function lockout(e){ e.stopPropagation(); }ab.onShow = function(){$$("idBoxTxt").select();if ( lock ) {$$E.addEvent( document, "keydown", lockup );$$E.addEvent( this.box, "keydown", lockout );OverLay.show();} } ab.onClose = function(){$$("idMsg").innerHTML = $$("idBoxTxt").value;$$E.removeEvent( document, "keydown", lockup );$$E.removeEvent( this.box, "keydown", lockout );OverLay.close(); }$$("idBoxClose").onclick = function(){ ab.close(); } $$("idBoxOpen").onclick = function(){ ab.show(); }$$("idCenter").onclick = function(){if(ab.center){ab.center = false;this.value = "居中效果";} else {ab.center = true;this.value = "取消居中";}ab.show(); }$$("idFixed").onclick = function(){if(ab.fixed){ab.fixed = false;this.value = "定位效果";} else {ab.fixed = true;this.value = "取消定位";}ab.show(); }$$("idOverlay").onclick = function(){if(lock){lock = false;this.value = "锁定屏幕";} else {lock = true;this.value = "解锁屏幕";}ab.show(); }})() </script> <br /> <br /> <input type="button" value=" 右下角弹窗效果 " id="idBoxOpen2" /> <dl id="idBox2" class="lightbox"><dt><b>右下角消息框</b> </dt><dd><input type="button" value=" 下滚渐隐 " id="idBoxClose2" /></dd> </dl> <script> (function(){ //右下角消息框 var timer, target, current,ab = new AlertBox( "idBox2", { fixed: true,onShow: function(){clearTimeout(timer); this.box.style.bottom = this.box.style.right = 0;},onClose: function(){ clearTimeout(timer); }});function hide(){ab.box.style.bottom = --current + "px";if( current <= target ){ab.close();} else {timer = setTimeout( hide, 10 );} }$$("idBoxClose2").onclick = function(){target = -ab.box.offsetHeight; current = 0; hide(); } $$("idBoxOpen2").onclick = function(){ ab.show(); }})() </script> <style> #idBox3_1, #idBox3_2{ width:120px; height:240px; top:30px; border:1px solid #999; display:none;} #idBox3_1 a, #idBox3_2 a{ position:absolute; bottom:-1.5em; right:0; font-size:12px;color:#00F;} #idBox3_1 a:hover, #idBox3_2 a:hover{color:#00F;} #idBox3_1{ left:0;} #idBox3_2{ right:0;} </style> <input type="button" value=" 对联广告效果 " id="idBoxOpen3" /> <div id="idBox3_1"><script type="text/javascript"><!-- google_ad_client = "pub-0342339836871729"; /* 120x240, 创建于 10-10-6 */ google_ad_slot = "9386870680"; google_ad_width = 120; google_ad_height = 240; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><a href="#" id="idBoxClose3_1">关闭</a> </div> <div id="idBox3_2"><script type="text/javascript"><!-- google_ad_client = "pub-0342339836871729"; /* 120x240, 创建于 10-10-6 */ google_ad_slot = "9386870680"; google_ad_width = 120; google_ad_height = 240; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><a href="#" id="idBoxClose3_2">关闭</a> </div> <script> (function(){ //对联广告效果 var ab1 = new AlertBox( "idBox3_1", { fixed: true } ),ab2 = new AlertBox( "idBox3_2", { fixed: true } );$$("idBoxClose3_1").onclick = $$("idBoxClose3_2").onclick = function(){ab1.close(); ab2.close(); return false; }$$("idBoxOpen3").onclick = function(){ ab1.show(); ab2.show(); }})() </script> <input type="button" value=" 拖动弹窗效果 " id="idBoxOpen4" /> <dl id="idBox4" class="lightbox"><dt id="idBoxTitle4"><b>点击拖动</b> </dt><dd><input type="button" value=" 定位效果 " id="idFixed4" /><input type="button" value=" 关闭 " id="idBoxClose4" /></dd> </dl> <script> (function(){ //拖动弹窗 var ab = new AlertBox("idBox4"), box = ab.box, x, y, flag = "page";$$("idBoxClose4").onclick = function(){ ab.close(); } $$("idBoxOpen4").onclick = function(){ ab.show(); }$$("idFixed4").onclick = function(){if(ab.fixed){ab.fixed = false;flag = "page";this.value = "定位效果";} else {ab.fixed = true;flag = "client";this.value = "取消定位";}ab.show(); }//拖动 $$E.addEvent($$("idBoxTitle4"), "mousedown", Start); function Start(e) {$$E.addEvent(document, "mousemove", Move);$$E.addEvent(document, "mouseup", Stop);x = e[flag + "X"] - box.offsetLeft;y = e[flag + "Y"] - box.offsetTop;ab.show(); } function Move(e) {box.style.left = e[flag + "X"] - x + "px";box.style.top = e[flag + "Y"] - y + "px"; } function Stop() {$$E.removeEvent(document, "mousemove", Move);$$E.removeEvent(document, "mouseup", Stop);ab.show(); }})() </script> </body> </html>
/*!* AlertBox* Copyright (c) 2010 cloudgamer* Blog: http://cloudgamer.cnblogs.com/* Date: 2010-10-10*///显示层对象 var AlertBox = function(box, options){//初始化程序this._initialize( box, options );this._initBox(); }; AlertBox.prototype = {_initialize: function(box, options) {this.box = $$(box);//显示层this._css = null;//备份样式this._setOptions(options);this.fixed = !!this.options.fixed;this.zIndex = this.options.zIndex;this.onShow = this.options.onShow;this.onClose = this.options.onClose;$$CE.fireEvent( this, "init" );},//设置默认属性_setOptions: function(options) {this.options = {//默认值fixed: false,//是否固定定位zIndex: 1000,//层叠值onShow: $$.emptyFunction,//显示时执行onClose: $$.emptyFunction//关闭时执行 };return $$.extend(this.options, options || {});},//初始化显示层对象_initBox: function() {var style = this.box.style;this._css = { "display": style.display, "visibility": style.visibility, "position": style.position, "zIndex": style.zIndex };//备份样式style.display = "none";style.visibility = "visible";document.body.insertBefore(this.box, document.body.childNodes[0]);$$CE.fireEvent( this, "initBox" );},//显示show: function(isResize) {//定位显示var style = this.box.style;style.position = this.fixed ? "fixed" : "absolute";style.zIndex = this.zIndex;$$CE.fireEvent( this, "show", isResize );style.display = "block";this.onShow();},//关闭close: function() {this.box.style.display = "none";$$CE.fireEvent( this, "close" );this.onClose();},//销毁程序dispose: function() {$$CE.fireEvent( this, "dispose" );$$D.setStyle( this.box, this._css );//恢复样式//清除属性this.box = this.onShow = this.onClose = null;} };//修正fixed对象 var RepairFixed = function() {if ( !$$B.ie6 ) return;var layer, body, parent = "__repairfixed";//记录父节点function Create(){//创建定位层函数body = document.bodyif (body.currentStyle.backgroundAttachment !== "fixed") {if (body.currentStyle.backgroundImage === "none") {body.runtimeStyle.backgroundRepeat = "no-repeat";body.runtimeStyle.backgroundImage = "url(about:blank)";}body.runtimeStyle.backgroundAttachment = "fixed";}layer = document.createElement("<div style='position:absolute;border:0;padding:0;margin:0;overflow:hidden;background:transparent;top:expression((document).documentElement.scrollTop);left:expression((document).documentElement.scrollLeft);width:expression((document).documentElement.clientWidth);height:expression((document).documentElement.clientHeight);display:block;'>");Create = $$.emptyFunction;}return {"append": function(elem){Create();elem[ parent ] = elem.parentNode;layer.appendChild(elem).runtimeStyle.position = "absolute";//插入bodyif ( layer.parentNode !== body ) body.insertBefore(layer, body.childNodes[0]);},"remove": function(elem){if ( !layer ) return;//移除元素if ( elem.parentNode === layer ) {elem.runtimeStyle.position = "";elem[ parent ] ? elem[parent].appendChild(elem) : layer.removeChild(elem);elem.removeAttribute(parent);//不能用delete }//没有内部元素就移除if ( !layer.childNodes.length && layer.parentNode == body ) body.removeChild(layer);}}; }();//兼容ie6扩展 if ( $$B.ie6 ) { AlertBox.prototype._initialize = (function(){var init = AlertBox.prototype._initialize,methods = {"init": function(){this._iframe = null;//遮盖select的iframethis.fixSelect = !!this.options.fixSelect;},"show": function(isResize) {RepairFixed[ this.fixed ? "append" : "remove" ]( this.box );if ( this.fixSelect ) {if ( !this._iframe ) {this._iframe = this.box.appendChild( document.createElement("<iframe style=\"position:absolute;z-index:-1;filter:alpha(opacity=0);\"></iframe>") );isResize = true;}if ( isResize ) {var size = $$D.getSize(this.box);$$D.setStyle( this._iframe, {height: size.height + "px", width: size.width + "px",top: -this.box.clientTop + "px", left: -this.box.clientLeft + "px"});}}},"close": function() {RepairFixed.remove( this.box );},"dispose": function() {RepairFixed.remove( this.box );if ( this._iframe ) this.box.removeChild( this._iframe );this._iframe = null;}};return function(){var args = [].slice.call(arguments), options = args[1] = args[1] || {};//扩展options $$.extend( options, {fixSelect: true//是否修复select遮盖问题}, false );//扩展钩子$$A.forEach( methods, function( method, name ){$$CE.addEvent( this, name, method );}, this );init.apply( this, args );} })();}//居中扩展 AlertBox.prototype._initialize = (function(){var init = AlertBox.prototype._initialize,methods = {"init": function(){this._centerCss = null;//记录原始样式this.center = !!this.options.center;},"show": function(isResize){if ( this.center ) {if ( !this._centerCss ) {var style = this.box.style;this._centerCss = { marginTop: style.marginTop, marginLeft: style.marginLeft, left: style.left, top: style.top };isResize = true;}if ( isResize ) {var size = $$D.getSize(this.box);$$D.setStyle( this.box, {marginTop: (this.fixed ? 0 : $$D.getScrollTop()) - size.height / 2 + "px",marginLeft: (this.fixed ? 0 : $$D.getScrollLeft()) - size.width / 2 + "px",top: "50%", left: "50%"});}} else {if ( this._centerCss ) {$$D.setStyle( this.box, this._centerCss ); this._centerCss = null;}}},"dispose": function(){if ( this._centerCss ) $$D.setStyle( this.box, this._centerCss );this._centerCss = null;}};return function(){var args = [].slice.call(arguments), options = args[1] = args[1] || {};//扩展options $$.extend( options, {center: false//是否居中}, false );//扩展钩子$$A.forEach( methods, function( method, name ){$$CE.addEvent( this, name, method );}, this );init.apply( this, args );} })();//覆盖层 var OverLay = function(){var overlay;function Create(){var lay = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);$$D.setStyle( lay, {overflow: "hidden", width: "100%", height: "100%",border: 0, padding: 0, margin: 0, top: 0, left: 0});overlay = new AlertBox( lay, { fixed: true } );Create = $$.emptyFunction;}return {"color": "#fff",//背景色"opacity": .5,//透明度(0-1)"zIndex": 100,//层叠值"show": function(){Create();$$D.setStyle( overlay.box, {backgroundColor: this.color, opacity: this.opacity});overlay.zIndex = this.zIndex;overlay.show();},"close": function(){ overlay && overlay.close(); }}; }()
/*!* Cloudgamer JavaScript Library v0.1* Copyright (c) 2009 cloudgamer* Blog: http://cloudgamer.cnblogs.com/* Date: 2009-10-15*/var $$, $$B, $$A, $$F, $$D, $$E, $$CE, $$S;(function(undefined){var O, B, A, F, D, E, CE, S;/*Object*/O = function (id) {return "string" == typeof id ? document.getElementById(id) : id; };O.emptyFunction = function(){};O.extend = function (destination, source, override) {if (override === undefined) override = true;for (var property in source) {if (override || !(property in destination)) {destination[property] = source[property];}}return destination; };O.deepextend = function (destination, source) {for (var property in source) {var copy = source[property];if ( destination === copy ) continue;if ( typeof copy === "object" ){destination[property] = arguments.callee( destination[property] || {}, copy );}else{destination[property] = copy;}}return destination; };/*from youa*/ O.wrapper = function(me, parent) {var ins = function() { me.apply(this, arguments); };var subclass = function() {};subclass.prototype = parent.prototype;ins.prototype = new subclass;return ins; };/*Browser*//*from youa*/ B = (function(ua){var b = {msie: /msie/.test(ua) && !/opera/.test(ua),opera: /opera/.test(ua),safari: /webkit/.test(ua) && !/chrome/.test(ua),firefox: /firefox/.test(ua),chrome: /chrome/.test(ua)};var vMark = "";for (var i in b) {if (b[i]) { vMark = "safari" == i ? "version" : i; break; }}b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";b.ie = b.msie;b.ie6 = b.msie && parseInt(b.version, 10) == 6;b.ie7 = b.msie && parseInt(b.version, 10) == 7;b.ie8 = b.msie && parseInt(b.version, 10) == 8;return b; })(window.navigator.userAgent.toLowerCase());/*Array*/A = function(){var ret = {isArray: function( obj ) {return Object.prototype.toString.call(obj) === "[object Array]";},indexOf: function( array, elt, from ){if (array.indexOf) {return isNaN(from) ? array.indexOf(elt) : array.indexOf(elt, from);} else {var len = array.length;from = isNaN(from) ? 0: from < 0 ? Math.ceil(from) + len : Math.floor(from);for ( ; from < len; from++ ) { if ( array[from] === elt ) return from; }return -1;}},lastIndexOf: function( array, elt, from ){if (array.lastIndexOf) {return isNaN(from) ? array.lastIndexOf(elt) : array.lastIndexOf(elt, from);} else {var len = array.length;from = isNaN(from) || from >= len - 1 ? len - 1: from < 0 ? Math.ceil(from) + len : Math.floor(from);for ( ; from > -1; from-- ) { if ( array[from] === elt ) return from; }return -1;}}};function each( object, callback ) {if ( undefined === object.length ){for ( var name in object ) {if (false === callback( object[name], name, object )) break;}} else {for ( var i = 0, len = object.length; i < len; i++ ) {if (i in object) { if (false === callback( object[i], i, object )) break; }}}};each({forEach: function( object, callback, thisp ){each( object, function(){ callback.apply(thisp, arguments); } );},map: function( object, callback, thisp ){var ret = [];each( object, function(){ ret.push(callback.apply(thisp, arguments)); });return ret;},filter: function( object, callback, thisp ){var ret = [];each( object, function(item){callback.apply(thisp, arguments) && ret.push(item);});return ret;},every: function( object, callback, thisp ){var ret = true;each( object, function(){if ( !callback.apply(thisp, arguments) ){ ret = false; return false; };});return ret;},some: function( object, callback, thisp ){var ret = false;each( object, function(){if ( callback.apply(thisp, arguments) ){ ret = true; return false; };});return ret;}}, function(method, name){ret[name] = function( object, callback, thisp ){if (object[name]) {return object[name]( callback, thisp );} else {return method( object, callback, thisp );}}});return ret; }();/*Function*/F = (function(){var slice = Array.prototype.slice;return {bind: function( fun, thisp ) {var args = slice.call(arguments, 2);return function() {return fun.apply(thisp, args.concat(slice.call(arguments)));}},bindAsEventListener: function( fun, thisp ) {var args = slice.call(arguments, 2);return function(event) {return fun.apply(thisp, [E.fixEvent(event)].concat(args));}}}; })();/*Dom*/D = {getScrollTop: function(node) {var doc = node ? node.ownerDocument : document;return doc.documentElement.scrollTop || doc.body.scrollTop;},getScrollLeft: function(node) {var doc = node ? node.ownerDocument : document;return doc.documentElement.scrollLeft || doc.body.scrollLeft;},contains: document.defaultView? function (a, b) { return !!( a.compareDocumentPosition(b) & 16 ); }: function (a, b) { return a != b && a.contains(b); },rect: function(node){var left = 0, top = 0, right = 0, bottom = 0;//ie8的getBoundingClientRect获取不准确if ( !node.getBoundingClientRect || B.ie8 ) {var n = node;while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; };right = left + node.offsetWidth; bottom = top + node.offsetHeight;} else {var rect = node.getBoundingClientRect();left = right = D.getScrollLeft(node); top = bottom = D.getScrollTop(node);left += rect.left; right += rect.right;top += rect.top; bottom += rect.bottom;};return { "left": left, "top": top, "right": right, "bottom": bottom };},clientRect: function(node) {var rect = D.rect(node), sLeft = D.getScrollLeft(node), sTop = D.getScrollTop(node);rect.left -= sLeft; rect.right -= sLeft;rect.top -= sTop; rect.bottom -= sTop;return rect;},curStyle: document.defaultView? function (elem) { return document.defaultView.getComputedStyle(elem, null); }: function (elem) { return elem.currentStyle; },getStyle: document.defaultView? function (elem, name) {var style = document.defaultView.getComputedStyle(elem, null);return name in style ? style[ name ] : style.getPropertyValue( name );}: function (elem, name) {var style = elem.style, curStyle = elem.currentStyle;//透明度 from youaif ( name == "opacity" ) {if ( /alpha\(opacity=(.*)\)/i.test(curStyle.filter) ) {var opacity = parseFloat(RegExp.$1);return opacity ? opacity / 100 : 0;}return 1;}if ( name == "float" ) { name = "styleFloat"; }var ret = curStyle[ name ] || curStyle[ S.camelize( name ) ];//单位转换 from jquryif ( !/^-?\d+(?:px)?$/i.test( ret ) && /^\-?\d/.test( ret ) ) {var left = style.left, rtStyle = elem.runtimeStyle, rsLeft = rtStyle.left;rtStyle.left = curStyle.left;style.left = ret || 0;ret = style.pixelLeft + "px";style.left = left;rtStyle.left = rsLeft;}return ret;},setStyle: function(elems, style, value) {if ( !elems.length ) { elems = [ elems ]; }if ( typeof style == "string" ) { var s = style; style = {}; style[s] = value; }A.forEach( elems, function(elem ) {for (var name in style) {var value = style[name];if (name == "opacity" && B.ie) {//ie透明度设置 from jqueryelem.style.filter = (elem.currentStyle && elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) + " alpha(opacity=" + (value * 100 | 0) + ")";} else if (name == "float") {elem.style[ B.ie ? "styleFloat" : "cssFloat" ] = value;} else {elem.style[ S.camelize( name ) ] = value;}};});},getSize: function(elem) {var width = elem.offsetWidth, height = elem.offsetHeight;if ( !width && !height ) {var repair = !D.contains( document.body, elem ), parent;if ( repair ) {//如果元素不在body上parent = elem.parentNode;document.body.insertBefore(elem, document.body.childNodes[0]);}var style = elem.style,cssShow = { position: "absolute", visibility: "hidden", display: "block", left: "-9999px", top: "-9999px" },cssBack = { position: style.position, visibility: style.visibility, display: style.display, left: style.left, top: style.top };D.setStyle( elem, cssShow );width = elem.offsetWidth; height = elem.offsetHeight;D.setStyle( elem, cssBack );if ( repair ) {parent ? parent.appendChild(elem) : document.body.removeChild(elem);}}return { "width": width, "height": height };} };/*Event*/ E = (function(){/*from dean edwards*/var addEvent, removeEvent, guid = 1,storage = function( element, type, handler ){if (!handler.$$guid) handler.$$guid = guid++;if (!element.events) element.events = {};var handlers = element.events[type];if (!handlers) {handlers = element.events[type] = {};if (element["on" + type]) {handlers[0] = element["on" + type];}}};if ( window.addEventListener ) {var fix = { "mouseenter": "mouseover", "mouseleave": "mouseout" };addEvent = function( element, type, handler ){if ( type in fix ) {storage( element, type, handler );var fixhandler = element.events[type][handler.$$guid] = function(event){var related = event.relatedTarget;if ( !related || (element != related && !(element.compareDocumentPosition(related) & 16)) ){handler.call(this, event);}};element.addEventListener(fix[type], fixhandler, false);} else {element.addEventListener(type, handler, false);};};removeEvent = function( element, type, handler ){if ( type in fix ) {if (element.events && element.events[type]) {element.removeEventListener(fix[type], element.events[type][handler.$$guid], false);delete element.events[type][handler.$$guid];}} else {element.removeEventListener(type, handler, false);};};} else {addEvent = function( element, type, handler ){storage( element, type, handler );element.events[type][handler.$$guid] = handler;element["on" + type] = handleEvent;};removeEvent = function( element, type, handler ){if (element.events && element.events[type]) {delete element.events[type][handler.$$guid];}};function handleEvent() {var returnValue = true, event = fixEvent();var handlers = this.events[event.type];for (var i in handlers) {this.$$handleEvent = handlers[i];if (this.$$handleEvent(event) === false) {returnValue = false;}}return returnValue;};}function fixEvent(event) {if (event) return event;event = window.event;event.pageX = event.clientX + D.getScrollLeft(event.srcElement);event.pageY = event.clientY + D.getScrollTop(event.srcElement);event.target = event.srcElement;event.stopPropagation = stopPropagation;event.preventDefault = preventDefault;var relatedTarget = {"mouseout": event.toElement, "mouseover": event.fromElement}[ event.type ];if ( relatedTarget ){ event.relatedTarget = relatedTarget;}return event;};function stopPropagation() { this.cancelBubble = true; };function preventDefault() { this.returnValue = false; };return {"addEvent": addEvent,"removeEvent": removeEvent,"fixEvent": fixEvent}; })();/*CustomEvent*/CE = (function(){var guid = 1;return {addEvent: function( object, type, handler ){if (!handler.$$$guid) handler.$$$guid = guid++;if (!object.cusevents) object.cusevents = {};if (!object.cusevents[type]) object.cusevents[type] = {};object.cusevents[type][handler.$$$guid] = handler;},removeEvent: function( object, type, handler ){if (object.cusevents && object.cusevents[type]) {delete object.cusevents[type][handler.$$$guid];}},fireEvent: function( object, type ){if (!object.cusevents) return;var args = Array.prototype.slice.call(arguments, 2),handlers = object.cusevents[type];for (var i in handlers) {handlers[i].apply(object, args);}},clearEvent: function( object ){if (!object.cusevents) return;for (var type in object.cusevents) {var handlers = object.cusevents[type];for (var i in handlers) {handlers[i] = null;}object.cusevents[type] = null;}object.cusevents = null;}}; })();/*String*/S = {camelize: function(s){return s.replace(/-([a-z])/ig, function(all, letter) { return letter.toUpperCase(); });} };/*System*/// remove css image flicker if (B.ie6) {try {document.execCommand("BackgroundImageCache", false, true);} catch(e) {} };/*define*/$$ = O; $$B = B; $$A = A; $$F = F; $$D = D; $$E = E; $$CE = CE; $$S = S;})();
转载：http://www.cnblogs.com/cloudgamer/
