基于H5、appcan實作遮罩效果

近來由于工作需要，需要在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 : ,
                aniId : ,
                type : ,
                data : "shade.html"
            });
        }
    }
});
           

appcan.window.open

是appcan中的視窗事件，是指打開一個視窗，其中：

name:新視窗的的名稱，如果視窗存在直接打開，如果不存在先建立然後打開
data:新視窗填充的資料
dataType:新視窗填充的資料類型
    : url
    : html 資料//比如傳入的是一個<div></div>
    : html 和 url 混合資料
aniId:動畫類型Id 
    : 無動畫   
type:視窗類型
    : 标記open的window上一個window不隐藏
width:要打開的視窗寬度，請傳
height:要打開的視窗高度，請傳
animDuration:動畫執行時間
extraInfo:擴充參數，設定值時，animDuration參數必傳
           

shade.html

就是我們要打開的遮罩層，将這個頁面的寬度，高度設定為視窗的大小，以實作全部遮蓋，再設定相應的透明度，這裡如果是web項目的話，需要考慮浏覽器的相容性：

shade.html

頁面代碼如下：

<style>
    html, body {
        background-color: rgba(,,,);
        padding: ;
        margin: ;
    }
</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(-);
        }
    }
});
           

同樣的這裡的CSS樣式省略，最終的實作效果如圖：

點選其中的關閉按鈕，可以關閉遮罩層。

上面的方法隻是實作遮罩效果萬千方法中的一種，其實還可以在同一個頁面實作，你隻需要在頁面中添加，觸發按鈕和遮罩層的div或者其他的标簽，遮罩層的大小和視窗大小一緻，起初你先讓遮罩層隐藏起來，可以調用h5或者JQuery相關的方法，hidden等等，當點選觸發按鈕時再讓他顯示出來就好了，但要注意，遮罩層的原來的層，不再一層顯示，也就是說你要讓遮罩層永遠的處于原來的層的上面，才可以實作遮罩效果。

至此，遮罩效果就實作了，如有更好的辦法實作或者讨論，歡迎評論。