Cocos2d-JS 3.3 模态对话框的实现

首先，先了解一下什么是模态对话框，百度百科的给出了下面一个定义：

模态对话框（Modal Dialogue Box，又叫做模式对话框），是指在用户想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应。如单击【确定】或【取消】按钮等将该对话框关闭。

游戏中经常会出现很多模态对话框，例如登陆框、提示框等等。

下面来看下效果图：

有几点值得关注的：

1.当对话框出现后，对话框外不响应触摸。

这就需要用到setSwallowTouches()，设置为true时，并且onTouchBegan返回true，就会吞没事件，不再向下传递

2.当对话框出现后，背景变暗

这里用到LayerColor的两个方法，设置颜色setColor()和设置透明度setOpacity()

下面，请看代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91

var ModalDialogueBox = cc.LayerColor.extend({        _listener: null,        ctor: function() {            this ._super(cc.color.BLACK);            this .ignoreAnchorPointForPosition( false );    //忽略锚点设置为false，默认为true，锚点(0, 0)            this .setOpacity(128);        //透明度                //初始化对话框            this ._initDialog();                return  true ;        },            onEnter: function()        {            this ._super();            //监听器            this ._listener =  new  cc.EventListener.create({                event: cc.EventListener.TOUCH_ONE_BY_ONE,                swallowTouches:  false ,                onTouchBegan: function(touch, event)                {                    return  true ;                }            });                //添加触摸监听            cc.eventManager.addListener( this ._listener,  this );        },            //初始化对话框        _initDialog: function()        {            var winSize = cc.winSize;                //背景            var bg =  new  cc.Sprite(res.dialog_png);            bg.setPosition(cc.p(winSize.width / 2, winSize.height / 2));            this .addChild(bg, 0, 101);                //OK按钮            var OKLabel =  new  cc.LabelTTF( "OK" ,  "Arial" , 36);            var OKMenuItem =  new  cc.MenuItemLabel(OKLabel,  this ._onCallback,  this );            OKMenuItem.setPosition(cc.p(100, 50));                //Cancel按钮            var cancelLabel =  new  cc.LabelTTF( "Cancel" ,  "Arial" , 36);            var cancelMenuItem =  new  cc.MenuItemLabel(cancelLabel,  this ._onCallback,  this );            cancelMenuItem.setPosition(cc.p(250, 50));                //菜单            var menu =  new  cc.Menu(OKMenuItem, cancelMenuItem);            menu.setPosition(cc.p(0, 0));            bg.addChild(menu);       //注意是添加到背景里面                this .setVisible( false );      //默认设置为不可见        },            _onCallback: function()        {            this .hidden();        },            //弹出        popup: function()        {            this .setVisible( true );            this ._listener.setSwallowTouches( true );                var bg =  this .getChildByTag(101);            bg.setScale(0);            var scaleTo =  new  cc.ScaleTo(2.0, 1);            var rotateBy =  new  cc.RotateBy(2.0, 360, 0);            var spawn =  new  cc.Spawn(scaleTo, rotateBy);            bg.runAction(spawn);        },            //隐藏        hidden: function()        {            this .setVisible( false );            this ._listener.setSwallowTouches( false );        },            onExit: function()        {            this ._super();            //移除触摸监听            cc.eventManager.removeListeners(cc.EventListener.TOUCH_ONE_BY_ONE,  true );        }   });

源引：http://blog.csdn.net/u013455818/article/details/44900345