JS弹框，支持ajax调用、拖拽，jquery、mootools两个版本
JS弹窗，有jquery和mootools两个版本
要求：jquery版本>=1.2.6，mootools用最新版本
先看截图啊：
在firefox、chrome、高版本ie下：有阴影、圆角效果
调用方法：
<input type="button" value="居中" onclick="mybox({title:'老衲',content:'B你好<br><br><br><br>世界',width:200,height:100,pos:'center'})" />
<input type="button" value="右下角" onclick="mybox({width:400,height:200,pos:'rightdown'})" />
<input type="button" value="ajax调用" onclick="mybox({width:400,height:200,ctype:'url',url:'echo.php'})" />
样式：css
<style type="text/css">
*{ margin:0; padding:0;}
.popbox{ position:absolute; width:300px; border:1px solid #84a0c4; background:#d3e2f5; border-radius:3px; box-shadow:0 0 6px #333; z-index:61;}
.popbox #popboxtop{ height:24px; line-height:24px; font-size:14px; font-weight:bold; cursor:move; overflow:hidden;}
.popbox #popboxtoptitle{ float:left; color:#15428b; text-indent:0.5em;}
.popbox #popboxtopclose{ float:right; font-weight:bold; color:#84a0c4; padding-right:0.5em; cursor:pointer;}
.popbox #popboxtopclose:hover{ color:#15428b;}
.popbox #popboxcontent{ margin:0 5px 5px 5px; background:#fff; border:1px solid #84a0c4; border-radius:3px; overflow:auto;}
</style>
jquery版本代码
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">
function mybox(opt){
/*默认*/
var defaults = {
title : '标题',
content : '内容',
ctype : 'common',
width : 300,
height : 200,
mask : true,
drag : true,
pos : 'center',
fix : true,
url : ''
};
var isIe6 = $.browser.msie && ($.browser.version == "6.0");
/*合并选项*/
var config = $.extend(defaults, opt);
/*模板*/
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>';
/*弹出*/
function popout(){
maskLayer();
$("body").prepend(tpl);/*挂载*/
position();/*调整位置*/
content();/*填充内容*/
closed();/*绑定关闭*/
};
popout();
/*调整位置*/
function position(){
if(isIe6) {
var fix = 'absolute';
}else{
var fix = config.fix ? 'fixed' : 'absolute';
}
if(config.pos == 'center'){/*居中*/
var left = ($(window).scrollLeft() + $(window).width()/2 - (config.width/2))+'px';
var top = ($(window).scrollTop() + $(window).height()/2 - (config.height/2))+'px';
$('.popbox').css({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height});
}else if(config.pos == 'rightdown'){/*右下*/
$('.popbox').css({'position':fix,'right':0,'bottom':0,'width':config.width,'height':config.height});
}else{/*默认居中*/
var left = ($(window).scrollLeft() + $(window).width()/2 - (config.width/2))+'px';
var top = ($(window).scrollTop() + $(window).height()/2 - (config.height/2))+'px';
$('.popbox').css({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height});
}
$('#popboxcontent').css({height:(config.height-31)+'px'});
};
/*填充内容*/
function content(){
$('#popboxtoptitle').html(config.title);
if(config.ctype == 'common'){/*文本或html内容*/
$('#popboxcontent').html(config.content);
}else if(config.ctype == 'url'){/*ajax请求*/
if(!config.url){$('#popboxcontent').html('请确认url地址');return;}
$.ajax({
url:config.url,
beforeSend : function(){$('#popboxcontent').html('加载中...');},
type : 'post',
success : function(msg){$('#popboxcontent').html(msg);},
error : function(){$('#popboxcontent').html('加载失败:(');}
});
}else{/*默认*/
$('#popboxcontent').html(config.content);
}
}
/*遮罩层*/
function maskLayer(color){
if(!color){color='#e7e527';}
var tmpMask=new String;
tmpMask = '<div id="maskLayer"></div>';
$("body").prepend(tmpMask);
$('#maskLayer').css({
/*'width':$(document).width()+'px',*/
'width':'100%',
'height':$(document).height()+'px',
'position':'absolute',
'top':'0px',
'left':'0px',
'z-index':'60',
'background-color':color,
'filter':'alpha(opacity=50)',
'opacity':'0.5'
});
};
/*关闭*/
function closed(){
$('#popboxtopclose').bind('click',function(){
setTimeout("$('#maskLayer').fadeOut(500)",0);
setTimeout("$('.popbox').fadeOut(500)",0);
setTimeout("$('#maskLayer').remove()",500);
setTimeout("$('.popbox').remove()",500);
});
}
/*拖拽*/
var mouse={x:0,y:0};
function moveDialog(event){
var e = window.event || event;
var top = parseInt($('.popbox').css('top')) + (e.clientY - mouse.y);
var left = parseInt($('.popbox').css('left')) + (e.clientX - mouse.x);
if(top < 1){top = 0;}/*上*/
if(left < 1){ left = 0;}/*左*/
bt = $(window).height() - config.height; if(top > bt){top = bt;}/*下*/
rt = $(window).width() - config.width; if(left > rt){left = rt;}/*右*/
$('.popbox').css({top:top,left:left});
mouse.x = e.clientX;
mouse.y = e.clientY;
};
$('#popboxtop').mousedown(function(event){
if(!config.drag || config.pos=='rightdown'){return;}
var e = window.event || event;
mouse.x = e.clientX;
mouse.y = e.clientY;
$(document).bind('mousemove',moveDialog);
});
$(document).mouseup(function(event){
$(document).unbind('mousemove', moveDialog);
});
/*结束*/
}
</script>
mootools版本
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
function sbox(opt){
/*默认*/
var defaults = {
title : '标题',
content : '内容',
ctype : 'common',
width : 300,
height : 200,
mask : true,
drag : true,
pos : 'center',
fix : true,
url : ''
};
var isIe6 = Browser.Engine.trident4;
/*合并选项*/
var config = Object.merge(defaults, opt);
/*尺寸*/
var sizeScr = $(document.body).getScroll();
var sizeScrollSize = $(document.body).getScrollSize();
var sizeWin = $(document.body).getSize();
/*模板*/
/*创建元素*/
var tpl1 = new Element('div',{class:'popbox'});
var tpl2 = new Element('div',{id:'popboxtop'});
var tpl3 = new Element('div',{id:'popboxcontent'});
var tplclear = new Element('div',{styles:{clear:'both'}});
var span1 = new Element('span',{id:'popboxtopclose'});
var span2 = new Element('span',{id:'popboxtoptitle'});
/*填充内容，结构*/
span1.innerHTML = '×';
tpl2.grab(span1);
tpl2.grab(span2);
tpl1.grab(tpl2);
tpl1.grab(tpl3);
/*弹出*/
function popout(){
maskLayer();
$(document.body).grab(tpl1,'top');/*挂载*/
position();/*调整位置*/
content();/*填充内容*/
closed();/*绑定关闭*/
};
popout();
/*调整位置*/
function position(){
if(isIe6) {
var fix = 'absolute';
}else{
var fix = config.fix ? 'fixed' : 'absolute';
}
if(config.pos == 'center'){/*居中*/
var left = (sizeScr.x + sizeWin.x/2 - (config.width/2))+'px';
var top = (sizeScr.y + sizeWin.y/2 - (config.height/2))+'px';
$$('.popbox').setStyles({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height});
}else if(config.pos == 'rightdown'){/*右下*/
$$('.popbox').setStyles({'position':fix,'right':0,'bottom':0,'width':config.width,'height':config.height});
}else{/*默认居中*/
var left = (sizeScr.x + sizeWin.x/2 - (config.width/2))+'px';
var top = (sizeScr.y + sizeWin.y/2 - (config.height/2))+'px';
$$('.popbox').setStyles({'position':fix,'top':top,'left':left,'width':config.width,'height':config.height});
}
$('popboxcontent').setStyles({height:(config.height-31)+'px'});
};
/*填充内容*/
function content(){
$('popboxtoptitle').innerHTML = config.title;
if(config.ctype == 'common'){/*文本或html内容*/
$('popboxcontent').innerHTML = config.content;
}else if(config.ctype == 'url'){/*ajax请求*/
if(!config.url){$('popboxcontent').innerHTML = '请确认url地址';return;}
new Request({
url:config.url,
onRequest : function(){$('popboxcontent').innerHTML = '加载中...';},
method : 'post',
onSuccess : function(msg){$('popboxcontent').innerHTML = msg;},
onFailure : function(){$('popboxcontent').innerHTML = '加载失败:(';}
}).send();
}else{/*默认*/
$('popboxcontent').innerHTML = config.content;
}
}
/*遮罩层*/
function maskLayer(color){
if(!color){color='#e7e527';}
var tmpMask=new String;
tmpMask = new Element('div',{id:'maskLayer'});
$(document.body).grab(tmpMask,'top');
$('maskLayer').setStyles({
'width':'100%',
'height':sizeScrollSize.y+'px',
'position':'absolute',
'top':'0px',
'left':'0px',
'z-index':'60',
'background-color':color,
'filter':'alpha(opacity=50)',
'opacity':'0.5'
});
};
/*关闭*/
function closed(){
$('popboxtopclose').addEvent('click',function(){
$('maskLayer').destroy();
$$('.popbox').destroy();
});
}
/*拖拽*/
var mouse={x:0,y:0};
function moveDialog(event){
var e = new Event(event);
var top = parseInt($$('.popbox').getStyle('top')) + (e.client.y - mouse.y);
var left = parseInt($$('.popbox').getStyle('left')) + (e.client.x - mouse.x);
if(top < 1){top = 0;}/*上*/
if(left < 1){ left = 0;}/*左*/
bt = sizeWin.y - config.height; if(top > bt){top = bt;}/*下*/
rt = sizeWin.x - config.width; if(left > rt){left = rt;}/*右*/
$$('.popbox').setStyles({'top':top,'left':left});
mouse.x = e.client.x;
mouse.y = e.client.y;
};
$('popboxtop').addEvent('mousedown',function(event){
if(!config.drag || config.pos=='rightdown'){return;}
var e = new Event(event);
mouse.x = e.client.x;
mouse.y = e.client.y;
$(window).addEvent('mousemove',moveDialog);
});
$(window).addEvent('mouseup',function(event){
$(window).removeEvent('mousemove', moveDialog);
});
/*结束*/
}
</script>
弹窗在ie6下 position:fixed 有问题，不过现在还有多少人用ie6呢？竟添乱，不考虑也罢！
（不能运行的留言给我）