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中文網其他相關文章！
