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

发表于 | 作者：

上期讲解了如何使用 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(){
	$('
').appendTo('body').fadeTo('fast',0.6);
	//添加遮罩覆盖整个文档并渐显至60%;
	return opt;
}

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

opt.s=function(){
	var str=['
‘,opt.title,’

‘]; //根据设定参数构架提示框样式 if(opt.btnC) str.push(‘ב); str.push(‘

‘,content,’

‘); if(opt.btnY||opt.btnN){ str.push(‘

‘); if(opt.btnY) str.push(‘‘,opt.btnYT,’‘); if(opt.btnN) str.push(‘‘,opt.btnNT,’‘); str.push(‘

‘); } str.push(‘

');
	//根据设定参数确定按钮显示
	w.top=w.top-$(str.join('')).appendTo('body').height()/2-99;
	$('#alertM').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(）方法，给提示框添加拖动方法，如果有不明白或者好的意见请留言给我，有时间我就会回复，

快下班了，十一完毕后就是坑爹的长时间工作，今天才星期三，可为什么总有种到了星期五的感觉！ :e7 。

10 条评论在 “为弹出提示框添加动态接口”

  1. Pingback引用通告： 设计制作一个自己的弹出提示框

  2. 您好！我想问一下，提示框浮动居中您是如何做到的？当页面下滑时，如何样提示框也跟着下滑居中呢？

    回复 ↓

    • 根据内容计算高度然后计算当前窗口高度:
      w.top=w.top-$(str.join('')).appendTo('body').height()/2-99;
      $('#alertM').css('top',w.top);
      滑动居中是绑定事件到滚动条移动事件:
      var scroll=function(){$drag.stop(true,false).animate({top:c+$(window).scrollTop()})};
      $(window).bind('scroll',scroll)

      回复 ↓

  5. 高手，我按照前一个 教材 做了提示框 但没法调用
    能否具体详谈下 我希望点击提示框确认后 打开一个连接

    回复 ↓

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。