近来由于工作需要，需要在appcan中实现遮罩的效果，并且在遮罩层上显示相应的东西，由于之前写过类似的功能，所以来说，还算是得心应手，在appcan中的实现和在html页面中的实现大同小异，废话不多说，上代码：
1、 首先你需要了解需求，看需要实现的遮罩效果，一般来说，我们需要在原页面添加一个触发遮罩层的按钮：
<div>
<button @click="explain">点击触发遮罩</button>
</div>添加了如上按钮之后，你要根据自己的需要去添加相应的CSS样式，由于比较简单，所以这里我们就不写出来了。
2、接下来需要实现点击触发，这里我使用的是vue实现，你需要引入vue的包；当然你也可以根据自己的需求，使用h5中的相关代码实现：
var vm = new Vue({
el : "#Page",
methods : {
explain : function() {
appcan.window.open({
name : 'shade',
dataType : 0,
aniId : 0,
type : 256,
data : "shade.html"
});
}
}
});appcan.window.open是appcan中的窗口事件，是指打开一个窗口，其中：
name:新窗口的的名称，如果窗口存在直接打开，如果不存在先创建然后打开
data:新窗口填充的数据
dataType:新窗口填充的数据类型
0: url
1: html 数据//比如传入的是一个<div></div>
2: html 和 url 混合数据
aniId:动画类型Id
0: 无动画
type:窗口类型
256: 标记open的window上一个window不隐藏
width:要打开的窗口宽度，请传0
height:要打开的窗口高度，请传0
animDuration:动画执行时间
extraInfo:扩展参数，设置值时，animDuration参数必传shade.html就是我们要打开的遮罩层，将这个页面的宽度，高度设置为窗口的大小，以实现全部遮盖，再设置相应的透明度，这里如果是web项目的话，需要考虑浏览器的兼容性：
shade.html页面代码如下：
<style>
html, body {
background-color: rgba(0,0,0,0.2);
padding: 0;
margin: 0;
}
</style>遮罩层上显示内容：
<div class="main">
<div class="content-summary">
<div class="detailed">要显示的内容</div>
</div>
<button class="buttonClose" @click="close">关闭</button>
</div>对应的JS代码：
new Vue({
el : "#app",
methods : {
close : function() {
appcan.window.close(-1);
}
}
});同样的这里的CSS样式省略，最终的实现效果如图：
点击其中的关闭按钮，可以关闭遮罩层。
上面的方法只是实现遮罩效果万千方法中的一种，其实还可以在同一个页面实现，你只需要在页面中添加，触发按钮和遮罩层的div或者其他的标签，遮罩层的大小和窗口大小一致，起初你先让遮罩层隐藏起来，可以调用h5或者JQuery相关的方法，hidden等等，当点击触发按钮时再让他显示出来就好了，但要注意，遮罩层的原来的层，不再一层显示，也就是说你要让遮罩层永远的处于原来的层的上面，才可以实现遮罩效果。
至此，遮罩效果就实现了，如有更好的办法实现或者讨论，欢迎评论。