移動端和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>'
                });

　　

 

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