Js組件layer的使用

 

作為獨立組件使用 layer

引入好layer.js后，直接用即可
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

在 layui 中使用 layer

layui.use('layer', function(){
  var layer = layui.layer;
  
  layer.msg('hello');
});              

 

layer.open(options) - 原始核心方法

/!*
 如果是頁面層
 */
layer.open({
  type: 1, // 層類型；類型：Number，默認：0；layer提供了5種層類型。可傳入的值有：0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）。 若你采用layer.open({type: 1})方式調用，則type為必填項（信息框除外）

  content: '傳入任意的文本或html' //這里content是一個普通的String
});
layer.open({
  type: 1,
  area:['500px', '300px'], // 寬和高
  content: $('#id') //這里content是一個DOM，注意：最好該元素要存放在body最外層，否則可能被其它的相對元素所影響
});
//Ajax獲取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    skin:'', //樣式類名。類型：String，默認：'';skin不僅允許你傳入layer內置的樣式class名，還可以傳入您自定義的class名。這是一個很好的切入點，意味着你可以借助skin輕松完成不同的風格定制。目前layer內置的skin有：layui-layer-lanlayui-layer-molv，未來我們還會選擇性地內置更多，但更推薦您自己來定義。以下是一個自定義風格的簡單例子

    content: str //注意，如果str是object，那么需要字符拼接。
  });
});
/!*
 如果是iframe層
 */
layer.open({
  type: 2, 
  content: 'http://sentsin.com' //這里content是一個URL，如果你不想讓iframe出現滾動條，你還可以content: ['http://sentsin.com', 'no'],使用網頁返回的內容渲染
}); 
/!*
 如果是用layer.open執行tips層
 */
layer.open({
  type: 4,
  content: ['內容', '#id'] //數組第二項即吸附元素選擇器或者DOM
});  

 

 

https://www.layui.com/doc/modules/layer.html#btn