簡單實用的移動端js-mobile layer

標籤：

公司觸屏版的開發已經完成，本篇文章跟大家介紹一個簡單實用的移動端js以實現遮罩效果，mobile layer。這個移動端js實現的效果簡潔，體積較小非常適合移動端開發，並且可以自訂提示的樣式。下面介紹幾個簡單demo

1.普通訊息框，並設定2秒自動關閉，代碼如下：

layer.open({    content: '通過style設定你想要的樣式',    style: 'background-color:#09C1FF; color:#fff; border:none;',    time: 2});

2. 提示框，並自訂標題風格，代碼如下：

layer.open({    title: [        '我是標題',        'background-color:#8DCE16; color:#fff;'    ],    content: '標題風格任你定義。。'    });

3. 提示框，並顯示1個按鈕：

layer.open({    content: '通過style設定你想要的樣式',    btn: ['OK']});

4. 詢問框，並顯示2個按鈕，不允許點遮罩關閉，代碼如下：

layer.open({    content: '你是想確認呢，還是想取消呢？',    btn: ['確認', '取消'],    shadeClose: false,    yes: function(){        layer.open({content: '你點了確認', time: 1});    }, no: function(){        layer.open({content: '你選擇了取消', time: 1});    }});

5. 頁面層，自訂背景等，代碼如下：

layer.open({    type: 1,    content: '空間任意發揮，這裡可傳入html',    style: 'width:240px; height:180px; padding:10px; background-color:#F05133; color:#fff; border:none;'});

使用簡單只需引入layer.m.js檔案和layer.css檔案即可。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

簡單實用的移動端js-mobile layer