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

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

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

下面来看下效果图：

有几点值得关注的：

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

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

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

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

下面，请看代码：

@H_403_130@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,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",36); var cancelMenuItem = new cc.MenuItemLabel(cancelLabel,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); } });
源码下载： 点击打开链接