首先引入文件 layui.css　　jquery.min.js　　layui.js

彈出層

data-method 後面的屬性控制是什麽彈窗，在js中寫方法

<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
        <button data-method="setTop" class="layui-btn">多窗口模式，層疊置頂</button>
        <button data-method="offset" data-type="t" class
 
="layui-btn layui-btn-normal">上彈出</button>
</div>

data-type 屬性控制彈窗位置 參考文件http://www.layui.com/doc/modules/layer.html#offset

js

// 模塊
layui.use(‘layer‘, function(){ //獨立版的layer無需執行這一句
var $ = layui.jquery, layer = layui.layer; //獨立版的layer無需執行這一句
  //觸發事件
  var active = {
      //這裏是data-method的名稱
    setTop: function
 
(){
      var that = this; 
      //多窗口模式，層疊置頂
      layer.open({
        type: 0 //0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）。 若你采用layer.open({type: 1})方式調用，則type為必填項（信息框除外）
        ,title: ‘這是蚊子標題‘
        ,area: [‘500px‘, ‘260px‘]//彈窗大小
        ,shade: 0//背景陰影
        ,maxmin: true
        ,offset: [ //為了演示，隨機坐標
          Math.random()*($(window).height()-300)
          ,Math.random()
 
*($(window).width()-390)
        ] 
        ,content: ‘<div>aa</div>‘     //內容與type有關，當type為2時 內容只能為地址，當type為1時，可以為id值，在頁面中寫好div設id，並隱藏。
        ,btn: [‘繼續彈出‘, ‘全部關閉‘,‘a‘] //按鈕的文字,可以在後面加按鈕
        ,yes: function(){//第一個按鈕，執行，再次點擊彈窗的效果。
          $(that).click(); 
        }
        ,btn2: function(){//第二個按鈕，關閉所有。
          layer.closeAll();
        }
        
        ,zIndex: layer.zIndex //重點1
        ,success: function(layero){
          layer.setTop(layero); //重點2
          console.log(layero);
        }
      });
    }
    
    //配置一個透明的詢問框
    ,confirmTrans: function(){
      layer.msg(‘大部分參數都是可以公用的<br>合理搭配，展示不一樣的風格‘, {
        time: 20000, //20s後自動關閉
        btn: [‘明白了‘, ‘知道了‘, ‘哦‘]
      });
    }
    
    //示範一個公告層
    ,notice: function(){
      layer.open({
        type: 1
        ,title: false //不顯示標題欄
        ,closeBtn: 0                    //是否有右上角的關閉按鈕
        ,area: ‘500px;‘//大小
        ,shade: 0.8//背景陰影
        ,id: ‘LAY_layuipro‘ //設定一個id，防止重復彈出
        ,btn: [‘火速圍觀‘, ‘殘忍拒絕‘]
        ,btnAlign: ‘c‘                        //按鈕居中
        ,moveOut:true
        ,moveType: 0 //拖拽模式，0或者1       //??????????
        ,content: ‘<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道嗎？親！<br>layer ≠ layui<br><br>layer只是作為Layui的一個彈層模塊，由於其用戶基數較大，所以常常會有人以為layui是layerui<br><br>layer雖然已被 Layui 收編為內置的彈層模塊，但仍然會作為一個獨立組件全力維護、升級。<br><br>我們此後的征途是星辰大海 ^_^</div>‘
        ,success: function(layero){
          var btn = layero.find(‘.layui-layer-btn‘);        //按鈕1增加跳轉地址，新開頁面打開
          btn.find(‘.layui-layer-btn0‘).attr({
            href: ‘http://www.layui.com/‘
            ,target: ‘_blank‘
          });
        }
      });
    }
    ,offset: function(othis){
      var type = othis.data(‘type‘)
      ,text = othis.text();
     
      layer.open({
        type: 1
         ,moveOut:false
      ,moveType: 0//拖拽模式，0或者1 
        ,offset: type //具體配置參考：http://www.layui.com/doc/modules/layer.html#offset
        ,id: ‘layerDemo‘+type //防止重復彈出
        ,content: ‘<div style="padding: 20px 100px;">‘+ text +‘</div>‘
        ,btn: ‘關閉全部‘
        ,btnAlign: ‘c‘ //按鈕居中
        ,shade: 0 //不顯示遮罩
        ,yes: function(){
          layer.closeAll();
        }
      });
    }
  };
  
  //一定要寫這句話不然不彈窗，給彈窗按鈕增加點擊事件
$(‘#layerDemo .layui-btn‘).on(‘click‘, function(){
    var othis = $(this), method = othis.data(‘method‘);
    active[method] ? active[method].call(this, othis) : ‘‘;
});
  
});

日期

layui（彈出層）