layui彈出層怎麼使用

layui彈出層的使用方法：首先引入jQuery1.8以上的任意版本；然後引入laery.js；最後透過「function show(){var a = layer.open({...}) ;}」方式使用laery.open彈出層即可。

本教學操作環境：Windows7系統、layui2.4&&jquery2.2.1版，Dell G3電腦。

推薦：《layUI教學》

layer 在layui 體系中的位置比較特殊，甚至讓很多人誤以為layui = layer ui，所以再次強調layer只是作為layui 的一個彈層模組

#1、獲取laery,你需要去官網下載laery.js 地址--http://layer.layui.com/

2、引入laery .js 在此之前你必須要先引入jQuery1.8以上的任一版本

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="layer/layer.js"></script>

3、使用laery.open();

function show(){
  var a = layer.open({
    type: 2,
    area: ['80%','450px'],
    title: '我是标题',
    shadeClose: true,
    content: ['layer_model.html','no']
  });
}

基礎參數

#1. type 類型

type: 1,  // 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

2. title 標題

title:"我是标题",  
//若你还需要自定义标题区域样式，那么你可以title: ['文本', 'font-size:18px;'] 数组第二项可以写任意css样式；
//如果你不想显示标题栏，你可以 title: false

3. content 內容

3.1.如果是頁麵層

layer.open({
  type: 1, 
  content: '传入任意的文本或html' //这里content是一个普通的String
});
 
layer.open({
  type: 1,
  content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
});
 
//Ajax获取
$.post('url', {}, function(str){
  layer.open({
    type: 1,
    content: str //注意，如果str是object，那么需要字符拼接。
  });
});

#範例:

3.2.如果是iframe層

layer.open({
  type: 2, 
  content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
});

範例:

3.3.如果是用layer.open執行tips層

layer.open({
  type: 4,
  content: ['内容', '#id'] //数组第二项即吸附元素选择器或者DOM
});

範例:

4. area 寬高

在預設狀態下，layer是寬高都自適應的，但當你只想定義寬度時，你可以area: '500px'，高度仍然是自適應的。當你寬高都要定義時，你可以area: ['500px', '300px']

5. btn 按鈕

訊息框模式時，btn預設是一個確認按鈕，其它層類型則預設不顯示，載入層和tips層則無效。當您只想自訂一個按鈕時，你可以btn: '我知道了'，當你要定義兩個按鈕時，你可以btn: ['yes', 'no']。當然，你也可以定義更多按鈕，例如：btn: ['按鈕1', '按鈕2', '按鈕3', …]，按鈕1的回呼是yes，而從按鈕2開始，則回調為btn2 : function(){}，以此類推。如：

layer.open({
  content: 'test',
  btn: ['按钮一', '按钮二', '按钮三'],
  yes: function(index, layero){
    //按钮【按钮一】的回调
  },
  btn2: function(index, layero){
    //按钮【按钮二】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  btn3: function(index, layero){
    //按钮【按钮三】的回调
    //return false 开启该代码可禁止点击该按钮关闭
  },
  cancel: function(){ 
    //右上角关闭回调
    //return false 开启该代码可禁止点击该按钮关闭
  }
});

6, shade 遮罩

即彈層外區域。預設是0.3透明度的黑色背景（'#000'）如果你想定義別的顏色，可以shade: [0.8, '#393D49']；如果你不想顯示遮罩，可以shade: 0

#如果你的遮罩是存在的那麼你也可以設定shadeClose 是否點擊遮罩關閉預設：false 如果你的shade是存在的，那麼你可以設定shadeClose來控制點擊彈層外區域關閉

以上是layui彈出層怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！