cocos creator 模态对话框创建

相关说明：

• 模态对话框就是当一个模态对话框打开时，用户只能与该对话框进行交互，而其他用户界面对象收不到输入信息。
• 模态对话框下，用户需要操作目标对话框就必须先操作模态对话框。

而我们在游戏当中经常会点开按钮，弹出对话框，此时要屏蔽下层触摸事件，防止穿透点击了对话框下面的内容。

创建步骤：

1.首先在对话框UI添加脚本（这里是ModalUI.js）,然后在ModalUI里添加一个节点属性：

    properties: {        mask : cc.Node,    },

2.在对话框UI下添加一个节点，命名为mask即可，注意mask节点层级关系，mask节点应该在对话框UI最底层。

3.设置mask节点的宽度和高度，使其完全覆盖整个游戏界面(主要是为了防止触摸穿透)

4.把mask节点拖拽至对话框UI下ModalUI脚本的mask属性处。

5.然后编写ModalUI脚本即可。

脚本如下：

cc.Class({    extends: cc.Component,    properties: {        mask : cc.Node,    },    onLoad: function () {    },    // 设置监听事件    onEnable : function(){        this.mask.on('touchstart',function(event){            event.stopPropagation();        });        this.mask.on('touchend', function (event) {            event.stopPropagation();        });    },    // 关闭监听    onDisable : function(){        this.mask.off('touchstart',function(event){            event.stopPropagation();        });        this.mask.off('touchend', function (event) {            event.stopPropagation();        });    },});

脚本说明

onEnable 和 onDisable是生命周期回调，详情参见 http://www.cocos.com/docs/creator/scripting/life-cycle-callbacks.html

onEnable

当组件的 enabled 属性从 false 变为 true 时，或者所在节点的 active 属性从 false 变为 true 时，会激活 onEnable 回调。倘若节点第一次被创建且 enabled 为 true，则会在 onLoad 之后，start 之前被调用。

onDisable

当组件的 enabled 属性从 true 变为 false 时，或者所在节点的 active 属性从 true 变为 false 时，会激活 onDisable 回调。

监听事件

this.node.on()注册监听事件，off()是关闭。需要注意的是，off 方法的 参数必须和 on 方法的参数一一对应，才能完成关闭。

派送事件

• 在 Cocos Creator 的事件派送系统中，我们采用冒泡派送的方式。冒泡派送会将事件从事件发起节点，不断地向上传递给他的父级节点，直到到达根节点或者在某个节点的响应函数中做了中断处理 event.stopPropagation()。
• stopPropagation 函数说明 ： 停止冒泡阶段，事件将不会继续向父节点传递，当前节点的剩余监听器仍然会接收到事件
  详情参见：http://www.cocos.com/docs/creator/scripting/events.html