layer 彈窗 載入層 選擇框
阿新 • • 發佈:2018-12-30
首先依賴jquery
1.alert
layer.alert("顯示資訊"); // 最基本的
layer.alert("顯示資訊", {
icon: 0 , // 0~6
title: "標題", // 文字、 、false
closeBtn: 1 // 右上角關閉x 0:無 1:有 2:有(略醜)
});
layer.alert("顯示資訊", {
title: "標題"
}, function (index) {
// 點選確定按鈕,執行程式碼塊,不會關閉當前提示
layer.close(index); // 關閉當前提示
});
2.confirm
layer.confirm("請確認",{
title: false,
btn: ['確定','取消']
},function(){
layer.alert("確定");
},function(){
layer.alert("取消");
});
3.資訊框(最常用)
layer.msg("最常用的提示",{
title: false,
closeBtn: 0,
time: 3*1000, // 3秒後關閉
shadeClose: true, // 點選其他位置關閉
scrollbar: false // 鎖定滾動條
});
var layerMsg = layer.msg("載入中" , {
title: false,
icon: 16 // 載入圖示
});
layer.close(layerMsg); // 關閉單個
layer.closeAll(); // 關閉所有
4.頁面層
layer.open({
type: 1,
content: '隨意標籤或者文字'
});
5.載入層
var layerMsg = layer.load(1,{ // 此處1沒有意義,隨便寫個東西
icon: 0, // 0~2 ,0比較好看
shade: [0.5,'black'] // 黑色透明度0.5背景
});
layer.close(layerMsg); // 關閉單個
layer.closeAll(); // 關閉所有
常用屬性
// 座標 , y z
offset: ['100px', '50px']
offset: '100px' // 設定垂直座標,水平自適應
offset: 't' // 頂部
offset: 'r' // 靠右
offset: 'b' // 底部
offset: 'l' // 靠左
offset: 'lt' // 左上
offset: 'lb' // 左下
offset: 'rt' // 右上
offset: 'rb' // 右下
// 寬高
area: ['100px', '100px']
area: '100px' // 定義寬度,高度自適應
style: class // 定義一個樣式