JS弹框，支持ajax调用、拖拽，jquery、mootools两个版本
自己借鉴、发明的JS弹窗，有jquery和mootools两个版本
要求：jquery版本>=1.2.6，mootools用最新版本
先看截图啊：
在firefox、chrome、高版本ie下：有阴影、圆角效果
调用方法：
1 <input type="button" value="居中" onclick="mybox({title:'老衲',content:'B你好<br><br><br><br>世界',width:200,height:100,pos:'center'})" />
2
3 <input type="button" value="右下角" onclick="mybox({width:400,height:200,pos:'rightdown'})" />
4
5 <input type="button" value="ajax调用" onclick="mybox({width:400,height:200,ctype:'url',url:'echo.php'})" />
样式：css
1 <style type="text/css">
2 *{ margin:0; padding:0;}
3 .popbox{ position:absolute; width:300px; border:1px solid #84a0c4; background:#d3e2f5; border-radius:3px; box-shadow:0 0 6px #333; z-index:61;}
4 .popbox #popboxtop{ height:24px; line-height:24px; font-size:14px; font-weight:bold; cursor:move; overflow:hidden;}
5 .popbox #popboxtoptitle{ float:left; color:#15428b; text-indent:0.5em;}
6 .popbox #popboxtopclose{ float:right; font-weight:bold; color:#84a0c4; padding-right:0.5em; cursor:pointer;}
7 .popbox #popboxtopclose:hover{ color:#15428b;}
8 .popbox #popboxcontent{ margin:0 5px 5px 5px; background:#fff; border:1px solid #84a0c4; border-radius:3px; overflow:auto;}
9 </style>
jquery版本代码
001 <script type="text/javascript" src="jquery-1.2.6.js"></script>
002 <script type="text/javascript">
003 function mybox(opt){
004 /*默认*/
005 var defaults = {
006 title : '标题',
007 content : '内容',
008 ctype : 'common',
009 width : 300,
010 height : 200,
011 mask : true,
012 drag : true,
013 pos : 'center',
014 fix : true,
015 url : ''
016 };
017 var isIe6 = $.browser.msie && ($.browser.version == "6.0");
018 /*合并选项*/
019 var config = $.extend(defaults, opt);
020 /*模板*/
021 var tpl = '<div class="popbox"><div id="popboxtop"><span id="popboxtopclose">×</span><span id="popboxtoptitle"></span><div style="clear:both;"></div></div><div id="popboxcontent"></div></div>';
022 /*弹出*/
023 function popout(){
024 maskLayer();
025 $("body").prepend(tpl);/*挂载*/
026 position();/*调整位置*/
027 content();/*填充内容*/
028 closed();/*绑定关闭*/
029 };
030 popout();
031 /*调整位置*/
032 function position(){
033 if(isIe6) {
034 var fix = 'absolute';
035 }else{
036 var fix = config.fix ? 'fixed' : 'absolute';
037 }
038 if(config.pos == 'center'){/*居中*/
039 var left = ($(window).scrollLeft() + $(window).width()/2 - (config.width/2))+'px';
040 var top = ($(window).scrollTop() + $(window).height()/2 - (config.height/2))+'px';
041 $('.popbox').css({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height});
042 }else if(config.pos == 'rightdown'){/*右下*/
043 $('.popbox').css({'position':fix,'right':0,'bottom':0,'width':config.width,'height':config.height});
044 }else{/*默认居中*/
045 var left = ($(window).scrollLeft() + $(window).width()/2 - (config.width/2))+'px';
046 var top = ($(window).scrollTop() + $(window).height()/2 - (config.height/2))+'px';
047 $('.popbox').css({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height});
048 }
049 $('#popboxcontent').css({height:(config.height-31)+'px'});
050 };
051 /*填充内容*/
052 function content(){
053 $('#popboxtoptitle').html(config.title);
054 if(config.ctype == 'common'){/*文本或html内容*/
055 $('#popboxcontent').html(config.content);
056 }else if(config.ctype == 'url'){/*ajax请求*/
057 if(!config.url){$('#popboxcontent').html('请确认url地址');return;}
058 $.ajax({
059 url:config.url,
060 beforeSend : function(){$('#popboxcontent').html('加载中...');},
061 type : 'post',
062 success : function(msg){$('#popboxcontent').html(msg);},
063 error : function(){$('#popboxcontent').html('加载失败:(');}
064 });
065 }else{/*默认*/
066 $('#popboxcontent').html(config.content);
067 }
068 }
069 /*遮罩层*/
070 function maskLayer(color){
071 if(!color){color='#e7e527';}
072 var tmpMask=new String;
073 tmpMask = '<div id="maskLayer"></div>';
074 $("body").prepend(tmpMask);
075 $('#maskLayer').css({
076 /*'width':$(document).width()+'px',*/
077 'width':'100%',
078 'height':$(document).height()+'px',
079 'position':'absolute',
080 'top':'0px',
081 'left':'0px',
082 'z-index':'60',
083 'background-color':color,
084 'filter':'alpha(opacity=50)',
085 'opacity':'0.5'
086 });
087 };
088 /*关闭*/
089 function closed(){
090 $('#popboxtopclose').bind('click',function(){
091 setTimeout("$('#maskLayer').fadeOut(500)",0);
092 setTimeout("$('.popbox').fadeOut(500)",0);
093 setTimeout("$('#maskLayer').remove()",500);
094 setTimeout("$('.popbox').remove()",500);
095 });
096 }
097 /*拖拽*/
098 var mouse={x:0,y:0};
099 function moveDialog(event){
100 var e = window.event || event;
101 var top = parseInt($('.popbox').css('top')) + (e.clientY - mouse.y);
102 var left = parseInt($('.popbox').css('left')) + (e.clientX - mouse.x);
103 if(top < 1){top = 0;}/*上*/
104 if(left < 1){ left = 0;}/*左*/
105 bt = $(window).height() - config.height; if(top > bt){top = bt;}/*下*/
106 rt = $(window).width() - config.width; if(left > rt){left = rt;}/*右*/
107 $('.popbox').css({top:top,left:left});
108 mouse.x = e.clientX;
109 mouse.y = e.clientY;
110 };
111 $('#popboxtop').mousedown(function(event){
112 if(!config.drag || config.pos=='rightdown'){return;}
113 var e = window.event || event;
114 mouse.x = e.clientX;
115 mouse.y = e.clientY;
116 $(document).bind('mousemove',moveDialog);
117 });
118 $(document).mouseup(function(event){
119 $(document).unbind('mousemove', moveDialog);
120 });
121 /*结束*/
122 }
123 </script>
mootools版本
001 <script type="text/javascript" src="mootools.js"></script>
002 <script type="text/javascript">
003 function sbox(opt){
004 /*默认*/
005 var defaults = {
006 title : '标题',
007 content : '内容',
008 ctype : 'common',
009 width : 300,
010 height : 200,
011 mask : true,
012 drag : true,
013 pos : 'center',
014 fix : true,
015 url : ''
016 };
017 var isIe6 = Browser.Engine.trident4;
018 /*合并选项*/
019 var config = Object.merge(defaults, opt);
020 /*尺寸*/
021 var sizeScr = $(document.body).getScroll();
022 var sizeScrollSize = $(document.body).getScrollSize();
023 var sizeWin = $(document.body).getSize();
024 /*模板*/
025 /*创建元素*/
026 var tpl1 = new Element('div',{class:'popbox'});
027 var tpl2 = new Element('div',{id:'popboxtop'});
028 var tpl3 = new Element('div',{id:'popboxcontent'});
029 var tplclear = new Element('div',{styles:{clear:'both'}});
030 var span1 = new Element('span',{id:'popboxtopclose'});
031 var span2 = new Element('span',{id:'popboxtoptitle'});
032 /*填充内容，结构*/
033 span1.innerHTML = '×';
034 tpl2.grab(span1);
035 tpl2.grab(span2);
036 tpl1.grab(tpl2);
037 tpl1.grab(tpl3);
038 /*弹出*/
039 function popout(){
040 maskLayer();
041 $(document.body).grab(tpl1,'top');/*挂载*/
042 position();/*调整位置*/
043 content();/*填充内容*/
044 closed();/*绑定关闭*/
045 };
046 popout();
047 /*调整位置*/
048 function position(){
049 if(isIe6) {
050 var fix = 'absolute';
051 }else{
052 var fix = config.fix ? 'fixed' : 'absolute';
053 }
054 if(config.pos == 'center'){/*居中*/
055 var left = (sizeScr.x + sizeWin.x/2 - (config.width/2))+'px';
056 var top = (sizeScr.y + sizeWin.y/2 - (config.height/2))+'px';
057 $$('.popbox').setStyles({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height});
058 }else if(config.pos == 'rightdown'){/*右下*/
059 $$('.popbox').setStyles({'position':fix,'right':0,'bottom':0,'width':config.width,'height':config.height});
060 }else{/*默认居中*/
061 var left = (sizeScr.x + sizeWin.x/2 - (config.width/2))+'px';
062 var top = (sizeScr.y + sizeWin.y/2 - (config.height/2))+'px';
063 $$('.popbox').setStyles({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height});
064 }
065 $('popboxcontent').setStyles({height:(config.height-31)+'px'});
066 };
067 /*填充内容*/
068 function content(){
069 $('popboxtoptitle').innerHTML = config.title;
070 if(config.ctype == 'common'){/*文本或html内容*/
071 $('popboxcontent').innerHTML = config.content;
072 }else if(config.ctype == 'url'){/*ajax请求*/
073 if(!config.url){$('popboxcontent').innerHTML = '请确认url地址';return;}
074 new Request({
075 url:config.url,
076 onRequest : function(){$('popboxcontent').innerHTML = '加载中...';},
077 method : 'post',
078 onSuccess : function(msg){$('popboxcontent').innerHTML = msg;},
079 onFailure : function(){$('popboxcontent').innerHTML = '加载失败:(';}
080 }).send();
081 }else{/*默认*/
082 $('popboxcontent').innerHTML = config.content;
083 }
084 }
085 /*遮罩层*/
086 function maskLayer(color){
087 if(!color){color='#e7e527';}
088 var tmpMask=new String;
089 tmpMask = new Element('div',{id:'maskLayer'});
090 $(document.body).grab(tmpMask,'top');
091 $('maskLayer').setStyles({
092 'width':'100%',
093 'height':sizeScrollSize.y+'px',
094 'position':'absolute',
095 'top':'0px',
096 'left':'0px',
097 'z-index':'60',
098 'background-color':color,
099 'filter':'alpha(opacity=50)',
100 'opacity':'0.5'
101 });
102 };
103 /*关闭*/
104 function closed(){
105 $('popboxtopclose').addEvent('click',function(){
106 $('maskLayer').destroy();
107 $$('.popbox').destroy();
108 });
109 }
110 /*拖拽*/
111 var mouse={x:0,y:0};
112 function moveDialog(event){
113 var e = new Event(event);
114 var top = parseInt($$('.popbox').getStyle('top')) + (e.client.y - mouse.y);
115 var left = parseInt($$('.popbox').getStyle('left')) + (e.client.x - mouse.x);
116 if(top < 1){top = 0;}/*上*/
117 if(left < 1){ left = 0;}/*左*/
118 bt = sizeWin.y - config.height; if(top > bt){top = bt;}/*下*/
119 rt = sizeWin.x - config.width; if(left > rt){left = rt;}/*右*/
120 $$('.popbox').setStyles({'top':top,'left':left});
121 mouse.x = e.client.x;
122 mouse.y = e.client.y;
123 };
124 $('popboxtop').addEvent('mousedown',function(event){
125 if(!config.drag || config.pos=='rightdown'){return;}
126 var e = new Event(event);
127 mouse.x = e.client.x;
128 mouse.y = e.client.y;
129 $(window).addEvent('mousemove',moveDialog);
130 });
131 $(window).addEvent('mouseup',function(event){
132 $(window).removeEvent('mousemove', moveDialog);
133 });
134 /*结束*/
135 }
136 </script>
弹窗在ie6下 position:fixed 有问题，不过现在还有多少人用ie6呢？竟添乱，不考虑也罢！
