弹窗的实现与封装

导入Popups.js。Popups.js源码如下 ：

var Popups = cc.Layer.extend({

	listener : null,			//事件对象
	tcLayer : null,				//传进来的layer
	blackLayer : null,			//黑色遮罩
	flag : false,				//如果为真，则代表弹窗被关闭掉
	touchbg_flag : false,		//如果为真，当点击黑色背景层的时候，弹窗会关掉. 默认为false
	isShow : true,				//弹窗一开始是否为可见,默认为true

	ctor : function(layer, isShow, touchbg_flag) 
	{

		this._super();

		//初始化属性
		this.setLocalZOrder(10000);
		if (typeof touchbg_flag != 'undefined') {
			this.touchbg_flag = touchbg_flag;
		}
		if (typeof isShow != 'undefined') {
			this.isShow = isShow;
		}
		this.visible = this.isShow;

		//
		this.tcLayer = layer;
		layer.setLocalZOrder(9999);
		this.addChild(layer);

		//
		this.initBlackLayer();
	},

	//初始化黑色遮罩
	initBlackLayer : function()
	{
		this.blackLayer = new cc.LayerColor(cc.color(0,0,0,120));
		if (this.isShow) 
		{
			this.show();
		}
		this.addChild(this.blackLayer);	
	},

	//添加事件,使弹窗下面的按钮无法被点击
	addListener : function(self)
	{
		this.listener = cc.EventListener.create({
		    event: cc.EventListener.TOUCH_ONE_BY_ONE,		
		    swallowTouches: true,           																			               
		    onTouchBegan: function (touch, event) 
		    {
		    	//如果touchbg_flag为真， 则代表点击黑色遮罩的时候，弹窗也会被关闭掉
		    	if (self.touchbg_flag) 
		    	{
		    		var x = self.tcLayer.x;
			    	var y = self.tcLayer.y;
			    	var w = self.tcLayer.width;
			    	var h = self.tcLayer.height;
			    	var tx = parseInt(touch.getLocation().x);
			    	var ty = parseInt(touch.getLocation().y);

			    	if ( tx >= x && tx <= x + w && ty >= y && ty <= y + h ) 
			    	{

			    	}
			    	else
			    	{
			    		self.flag = true;
			    		self.hidden(self);
			    	}
		    	}

		        return true;    									
		    },

		    onTouchEnded: function (touch, event) 
		    {	
		    	if (self.touchbg_flag && self.flag) 
		    	{
		    		 self.deleteListener();
		    		 self.flag = false;
		    	}
		    }
		});

		cc.eventManager.addListener(this.listener, this.blackLayer);
	},

	//删除事件
	deleteListener : function()
	{
		cc.eventManager.removeListener(this.listener);
	},

	//显示
	show : function(self, fun)
	{
		this.visible = true;

		var fadeIn = new cc.FadeTo(0.2, 120);
		this.blackLayer.runAction(fadeIn);

		this.tcLayer.scale = 0;
		var scaleTo = new cc.ScaleTo(0.4, 1).easing(cc.easeElasticOut(0.7)) ;
		var func = new cc.CallFunc(function(e){		

			 if (typeof fun != 'undefined') 
			 {
			 	 fun();
			 }
		}); 

		var seq = new cc.Sequence(scaleTo, func);
		this.tcLayer.runAction(seq);
		this.addListener(self);
	},

	//隐藏
	hidden : function(self, fun)
	{	
		var scaleTo = new cc.ScaleTo(0.4, 0).easing(cc.easeElasticOut(0.7)) ;
		var func = new cc.CallFunc(function(e){	

			 self.deleteListener();
			 self.visible = false;
			 if (typeof fun != 'undefined') 
			 {
			 	 fun();
			 }
		}); 

		var seq = new cc.Sequence(scaleTo, func);  
		this.tcLayer.runAction(seq);
		var fadeOut = new cc.FadeOut(0.2);
		this.blackLayer.runAction(fadeOut);
	}

});

导入后，编写如下代码 ：

//1、创建一个layer用于存放弹窗sprite，layer的宽和高等于弹窗图片的大小
var layer = new cc.LayerColor(cc.color(0,0,0,0), 750, 427);
layer.x = 400 - (layer.width/2);
layer.y = 640 - (layer.height/2);

//2、创建弹窗图片
var tc = new cc.Sprite('res/tc.png');
tc.x = layer.width / 2;
tc.y = layer.height / 2;
layer.addChild(tc);

//3、弹窗的按钮
var bnt = new cc.MenuItemImage( 'res/bnt.png', 'res/bnt.png', function () {  
    
    //关闭弹窗。function为回调函数，弹窗完全关闭后回调
	this.pus.hidden(this.pus, function(){
		console.log('弹窗关闭了');
	});

}, this ); 
bnt.x = layer.width / 2;
bnt.y = 45;
var menu = new cc.Menu(bnt);  
menu.x = 0;   
menu.y = 0;  
layer.addChild(menu); 

/*4、创建Popups对象。参数意义分别为 ： 
     层
     弹窗一开始是否为可见，默认为true
     点击遮罩层的时候是否关闭弹窗，默认为false。若为true，则存放弹窗的layer必须设置宽高
*/
this.pus = new Popups(layer, false, true);
this.addChild(this.pus);

具体代码 ：

cocos2d-js弹窗组件_cocoscreator弹窗-HTML5代码类资源-CSDN下载