为弹出提示框添加动态接口

上期讲解了如何使用 Css来设计一个弹出提示框。只是设计还无法使用，需要给它添加一些接口，才可以动态的控制它的显示效果及各种回调方法。

开始之前你可能希望先查看： Demo

首先定义一个方法：

function alertM(content,opt){
	// content表示提示框内容
	// opt表示提示框各种控制参数
}

我所使用的方法是使用多种参数来控制，并不是说这种方法最好，你也可以设计使用多种方法来控制，这并无定理，只是比较适合我而已。

既然使用参数控制，第一步当然是确定各种参数，代码如下：

opt= $.extend({
	time:4000,	//提示框显示时间，默认4秒后自动消失
	title:'提示',	//标题，
	width:400,	//默认宽度400px
	height:'auto',	//默认高度自适应
	btnC:true,	//默认显示关闭按钮
	btnY:true,	//默认显示确定按钮
	btnYT:'确定',	//默认确定按钮显示文字
	btnN:false,	//默认隐藏取消按钮
	btnNT:'取消',	//默认取消按钮显示文字
	cF:function(){},	//关闭按钮回调方法
	yF:function(){},	//确定按钮回调方法
	nF:function(){},	//取消按钮回调方法
	rF:function(){}	//消失事件回调方法
},opt||{});

确定提示框位置：

var w={
	height: $(document).height(),
	left: $(window).width()/2-opt.width/2,
	top: $(window).height()/2+$(window).scrollTop()
};

我所设定的步骤是先在文档上覆盖一层遮罩，然后再显示提示框：

opt.h=function(){
	$('<div id="hbg" style="height:'+w.height+'px;"></div>').appendTo('body').fadeTo('fast',0.6);
	//添加遮罩覆盖整个文档并渐显至60%;
	return opt;
}

接下来重要的一步，把提示框添加至文档流中：

opt.s=function(){
	var str=['<div id="alertM" style="left:',w.left,'px;height:',opt.height,'px;width:',opt.width,'px;overflow:hidden"><h5 id="alertT">',opt.title,'</h5>'];
	//根据设定参数构架提示框样式
	if(opt.btnC)
		str.push('<a id="alertR" title="关闭" href="javascript:void(0)">&times;</a>');
	str.push('<div id="alertP">',content,'</div>');
	if(opt.btnY||opt.btnN){
		str.push('<div id="alertBtns">');
		if(opt.btnY)
			str.push('<a id="alertY" href="javascript:void(0)">',opt.btnYT,'</a>');
		if(opt.btnN)
			str.push('<a id="alertN" href="javascript:void(0)">',opt.btnNT,'</a>');
		str.push('</div>');
	}
	str.push('</div>');
	//根据设定参数确定按钮显示
	w.top=w.top-$('#alertM').height()/2-200;
	$(str.join('')).appendTo('body').css('top',w.top);
	return opt;
}

添加完后要给提示框一个平滑的动画显示效果，以免用户觉得突兀：

opt.a=function(){
	$('#alertM').animate({top:w.top+50,opacity:'show'},opt.b)
	//向下滑动并渐显
}

显示出来后当然要绑定各种回调事件：

opt.b=function(){
	$('#alertM').show().css('top',w.top+50);
	$('#alertT').drag('#alertM');	//绑定拖拽事件
	$('#alertR').click(function(){
		if(opt.cF()!=false)
			opt.r()
	});
	$('#alertY').click(function(){
		if(opt.yF()!=false)
			opt.r();
	});
	$('#alertN').click(function(){
		if(opt.nF()!=false)
			opt.r();
	});
	//绑定4个回调事件,r()是最后调用的
}

我设定的一个页面同一时间只允许出现一个提示框，所以要判断下当前页面里是否已经弹出了提示框：

if($('#alertM').length>0){
	$('#alertM').remove();
	opt.s().b();
}else
	opt.h().s().a();

显示完啦，事件也绑定啦，最后当然是消失了：

if(amrt);
	clearTimeout(amrt);
amrt=false;	//如果上一次弹出框时设定了定时,则清除定时
opt.r=function(){
	$('#alertM').animate({top:w.top+100,opacity:'hide'},function(){
		$('#hbg').fadeOut(function(){
			$(this).remove();
			opt.rF();
		});
		$(this).remove();	//消失动画,删除元素,并执行回调事件
	});
	if(amrt);
		clearTimeout(amrt);
	amrt=false;
	return opt;
}
if (!isNaN(opt.time)) {
	amrt=setTimeout(function(){opt.r()}, opt.time);
	//如果time参数为数字,则定时消失,也就是说参数可以设置字符来设定不定时消失
}

好了，提示框方法已经构造好了，如何使用呢？很简单，像平常alert那样就可以，复杂的功用全靠后面的参数项来完成。

这是简单的调用：

	alertM('hello word!');

这是复杂一些的：

$('#alm').click(function(){
	alertM('测试',{
		time:'y',
		yF:function(){
			alertM('1',{
				yF:function(){
					alertM('2',{time:'y'});
					return false
				}
			});
			return false;	//返回 false代表当前提示框不会消失
		}
	});
})

代码完毕，下期讲解.drag(）方法，给提示框添加拖动方法，如果有不明白或者好的意见请留言给我，有时间我就会回复，

写的也不错。我之前写过一个。呵呵　。
http://6yang.net/myjavascriptlib/moveBox/
http://www.shpianomusic.com/en/application.php（提交即可）

写的很好啊这个弹出层

难道非要把所有选项全部填完才能看到效果?

讲的好详细，值的收藏

lz 你有没有测试于jquery ui中大dialog性能,我没有比较,希望你测试以下,我这里拖动你大alert很卡
系统 ununtu
browser:firefox 5.0

我没有使用 jquery ui,拖拽是基于我自己写的 drag方法,我不清楚 ubuntu下如何,不过 Windows环境下IE6亲测可以流畅使用.或许你可以尝试升级 Firefox到8.0beta再查看效率如何

thanks first
mark after

 还可以，小弟也写了一个弹出层，先上图过下眼瘾（为了隐私，这图片本来是居中的，我截掉上面一段了）

 

页面上的调用：

<input type="Submit" name="" id="show-div" value="显示层" onclick="javascript:showDiv('pop-div','500','300')" />

<div id="pop-div" class="pop-div" style="display:none;">
     <div class="pop-thead"><span></span><span class="float_right"><a href="javascript:closeDiv('pop-div')" id="pop-close">Close</a></span></div>
     <div class="pop-content"> 这里是你添加的内容！</div>
</div>
<div id="pop-clarity" class="pop-clarity" style="display:none;"></div>

 

jquery控制：

 

/*jQuery公共弹出层*/
function showDiv(pop_id,pop_width,pop_height,pop_url){
 var pop_obj = $("#"+pop_id);
 var margin_left=pop_width/2;
 var margin_top=pop_height/2;
 
 pop_obj.css("width",pop_width+"px");
 pop_obj.css("height",pop_height+"px");
 pop_obj.css("position","fixed!important");
 pop_obj.css({"position": "absolute","display":"","left":"50%","top":"50%","z-index":"9999"});
 pop_obj.css("margin-left","-"+margin_left+"px!important");//FF IE7 该值为本身高的一半
 pop_obj.css("margin-top","-"+margin_top+"px!important");//FF IE7 该值为本身高的一半
 pop_obj.css("margin-top","0px");

 if(pop_url!=''){
  $.get(pop_url,function(data){
   //3.接受从服务器端返回的数据
   //alert(data);
   //4.将服务器端的返回的数据显示到页面上
   //取到用来显示结果信息的节点
   var resultObj = $("#pop-content");
   resultObj.html(data);
  });
 }

 pop_obj.show();
 $("#pop-clarity").show();
}

function closeDiv(pop_id){
 $("#"+pop_id).hide();
 $("#pop-clarity").hide();
}
/*//jQuery公共弹出层*/[/code]

 

 

弹出层样式：

/*公共弹出层居中样式*/
.pop-div {
 background-color: #ff6;
 border: 1px solid #f90;
 text-align: center;
 line-height: 40px;
 font-size: 12px;
 font-weight: bold;
 z-index:99;
 width: 500px;
 height: 360px;
 left:50%;/*FF IE7*/
 top: 50%;/*FF IE7*/
 margin-left:-250px!important;/*FF IE7 该值为本身宽的一半 */
 margin-top:-180px!important;/*FF IE7 该值为本身高的一半*/
 margin-top:0px;
 position:fixed!important;/*FF IE7*/
 position:absolute;/*IE6*/
 _top:       expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
 document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.pop-clarity {
 background-color: #ccc;
 width: 100%;
 height: 100%;
 left:0;
 top:0;/*FF IE7*/
 filter:alpha(opacity=80);/*IE*/
 opacity:0.8;/*FF*/
 z-index:1;
 position:fixed!important;/*FF IE7*/
 position:absolute;/*IE6*/
 _top:       expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
 document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.pop-thead {
 height:30px;
 line-height:30px;
}
.pop-content {
 clear:both;
}
/*//公共弹出层居中样式*/

这样写资源消耗太大了吧,,,,,

高度位置还是用的表达式,,,,,,,这样容易引起崩溃的

.css()可以合并的,类似于.css({width:1,height:1,top:1})这样,不过还是推荐用原生的.style属性,

另外?没有回调方法么?如何调用其他方法呢?