1. 技术文章
  2. JS弹框，支持ajax调用、拖拽，jquery、mootools两个版本

JS弹框，支持ajax调用、拖拽，jquery、mootools两个版本

由 扶醉桌前 提交于 2019-11-27 03:04:42

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">&times;</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 = '&times;';
	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呢？竟添乱，不考虑也罢！

（不能运行的留言给我）

标签
mootools
jquery
弹窗
ajax
拖拽
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!