移動端和PC端頁面常用的彈出層

我們在頁面的時候，很多時候用到了彈出層，消息提醒，确認框等等，統一樣式的彈出框可以使頁面更加優美。在此，我整理一下我們項目的移動端和PC端頁面常用的彈出層。

一、移動端

我們需在頁面引入彈出框的樣式和js

<link href="__STATIC__/weui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="__JS__/m/dialog.js"></script>      

1、提示語

    1）加載

說明：帶有等待圖示，提示語内容為“資料加載中”
例子：$.Dialog.loading();      

　　

    2）成功

說明：帶有“√”圖示，用于成功提示，預設提示為“操作成功!”，也可自定義
例子：$.Dialog.success("評論成功");      

　　

    3） 失敗

說明：帶有“×”圖示，用于失敗提示，預設提示為“操作失敗!”，也可自定義
例子：$.Dialog.fail("請選擇活動");      

  2、确認框

  說明：

  第一個參數：題目  第二個參數：内容  回調方法：點選确認的回調函數

   例子：

$.Dialog.alert('中獎啦', '活動已結束! ',function(){
    window.location.href=index_url;
});      

　　

  3、詢問框

說明：第一個參數：題目  第二個參數：内容  第三個參數：左邊按鈕名  第四個參數：右邊按鈕名

rightCallback方法：點選右邊按鈕的回調函數

leftCallback方法：點選左邊按鈕的回調函數

 例子：

$.Dialog.confirm("溫馨提示","成功兌換優惠券","繼續兌換","檢視清單",{
    rightCallback:function(){
        location.href = "{:addons_url('ShopCoupon://Wap/personal')}";
    },leftCallback:function(){
        window.location.replace("{:U('score_exchange',array('coupon_type'=>0))}");
    }
})      

　　

  4、關閉提示框

說明：将以上的彈出框關閉。（成功提示與失敗提示會在2000毫秒後自動關閉提示框）
例子：$.Dialog.close();      

  二、PC端

在頁面中，我們需引入js:

<script type="text/javascript" src="__STATIC__/layertool/layer.js?v={:SITE_VERSION}"></script>      

　　這裡你可以參考layer的官方文檔。​​http://layer.layui.com/​​

  1、加載層

說明：有三種風格，load預設是不會自動關閉的

預設：

1：

2：

例子：
//eg1
var index = layer.load();
//eg2
var index = layer.load(1); //換了種風格
//eg3
var index = layer.load(2, {time: 10*1000}); //換風格，并且設定最長等待10秒      

　　2、提示框

說明：彈出提示層，常用的有以下兩種

例子：

1） layer.msg()
layer.msg('玩命提示中');      

　　

2）layer.alert()
//eg1
layer.alert('隻想簡單的提示');      

　　

//eg2
layer.alert('加了個圖示', {icon: 1}); //這時如果你也還想執行yes回調，可以放在第三個參數中。      

　　

//eg3
layer.alert('有了回調', function(index){
  //do something
  layer.close(index);
});      

  3、詢問層

  說明：layer.confirm()，有兩個按鈕的彈出層

  按鈕名：btn: ['确認','取消']

  标題名：title : ['提示' , true]

  例子：

var pot = layer.confirm('請認真檢查，送出後将不能修改，是否送出？', {
                    btn: ['确認','取消'], //按鈕
                    title : ['提示' , true]
                }, function(){
                    layer.close(pot);
                    var lay1 = layer.load();
                    $.post("{:U('save_reply')}",{reply:window.JSON.stringify(reply)},function(res){
                        if(res.status == 1){
                            layer.close(lay1);
                            layer.msg(res.msg);
                            setTimeout(window.location.replace("{$go_url}"),1000);
                        }else{
                            layer.close(lay1);
                            layer.msg(res.msg);
                        }
                    });
                }, function(){
                    layer.close(pot);
                });      

　　

  4、頁面層

  說明：

  title：題目

  area：寬高

  content：内容

  例子：

//頁面層
layer.open({
                    type: 1,
                    title:'客服回複',
                    skin: 'layui-layer-rim', //加上邊框
                    area: ['450px', '290px'], //寬高
                    content:' <div class="table-bar" style="height: auto; padding-bottom: 10px;">'+
                            '客服名稱： <input class="input_width" type="text" name="remark_name" id="remark_name" value="客服" placeholder="請輸入客服名稱" /><br/>'+
                            '回複内容： <textarea class="input_width" name="remark" id="remark" rows="5" placeholder="請輸入回複内容"></textarea><br/>' +
                            '<button class="btn layer_btn" id="reply" type="submit" target-form="form-horizontal">回複</button>' +
                            '</div>'
                });      

　　

歡迎關注下面的公衆号，進一步技術交流：