对popup弹出框的一点想法

KelvinQ 发布于 2013/10/08 15:53
阅读 1K+
收藏 1

目前渴切的popup弹出框,会去取href这个属性,这样就对调用有很多限制,而且只能使用id来查找元素。

新增一个专门用来连接元素的属性会不会好一点?

源码中popup的方法改成这样:

$($(this).attr('rellink')).fadeIn().animate({'top':'60%'});
像如下调用:
<a href="###" class="button" rel="popup" rellink=".popup">点击我弹出POPUP窗口</a>

这样就可以使用jQuery的所有查找器了。

popup方法的改进:

$(function(){
	//定义命名空间
	$.extend({popups:{}});
	$('a[rel=popup]').click(function(){
		$('body').prepend('<div id="mask"></div>').find('#mask').css({opacity:0.5,  cursor:'pointer', background:'black', position:'absolute', zIndex:999, width:'100%',  height:$(document).height()});
		var popwin = $(this);
		var handle = $(popwin.attr('rellink'));
		handle.fadeIn().animate({'top':'60%'});
		//注册rellink属性
		$.extend($.popups,{rellink:popwin.attr('rellink')});
		//注册closePopup方法
		$.extend($.popups,{closePopup:function(){
			$('#mask').remove();
			$(popwin.attr('rellink')).fadeOut(); 
		}});
		/*点击遮罩关闭,live方法用于,为通过js新增的元素添加事件*/
		$('#mask, '+$.popups.rellink+' del,'+$.popups.rellink+' .cancel').live('click',function(){
			$.popups.closePopup();
		})
	})		   
})

加载中
0
KelvinQ
KelvinQ

渴切的提示信息改写一下:

调用:

<input type="button" rel="tooltip" style="height:80px;" value="移上来试试" relcontent="渴切的框架很好用啊!!!" class="button blue">

js:

$(function(){
$('[rel=tooltip]').hover(function(){ 
$('<div class="tooltip" style="display:none; top:'+($(this).offset().top+$(this).height()+14)+'px;left:'+$(this).offset().left+'px;"><div class="arrow"></div>'+$(this).attr('relcontent')+'</div>').appendTo('body').fadeIn();					
},
...
})

css:

.tooltip .arrow{ width:0; height:0; border-top:0px; border-bottom:5px solid #000; border-right:5px solid transparent; border-left:5px solid transparent; position:absolute; top:-4px;left:8px; }
返回顶部
顶部