溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
【layer簡介】
layer，一個可以讓你想到即可做到的web彈窗（層）解決方案（js組件）。layer側重于用戶靈活的自定義，為不同人的使用習慣提供動力。其意義在于，可以讓您的頁面擁有更豐富與便捷的操作體驗，而您只需在調用時簡單地配置相關參數，即可輕松實現。
【注意事項】
一、使用時，請把文件夾layer整個放置在您站點的任何一個目錄，只需引入layer.js即可，除jQuery外，其它文件無需再引入。
二、如果您的js引入是通過合并處理或者您不想采用layer自動獲取的絕對路徑，您可以通過layer.config()來配置（詳見官網API頁）
三、jquery需1.8+
下載layer后，把它部署到你項目中的任何一個目錄（當然，我們推薦放在前端相關目錄里），你不能去挪動layer里面的文件結構，因為它們是不可拆散的組合。就像這樣：(特別說明：需要把整個layer文件夾引入你的文件中，而不是單單引入layer.js文件)
你不必去管那些文件是干嘛的，你只需要認準一個文件：layer.js 沒錯，當你試圖在頁面呈現layer的時候，你應該這樣去做：（最簡單的示例）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn{
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
</style>
</head>
<body>
<div class="btn">點我</div>
<!--你必須先引入jQuery1.8或以上版本-->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(".btn").bind("click",function(){
layer.msg('點我的人最美！');
});
</script>
</body>
</html>$("#btn").bind("click",function(){
//layer.msg('點我的人最美！');
layer.msg('此商品不存在或者已下架，看看其他商品吧！', {
time: 3000
});
});更多示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn:nth-child(odd){
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
.btn:nth-child(even){
width: 100%;
height: 50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 15px;
}
#test5{
text-align: center;
width: 500px;
margin-left: 500px;
}
</style>
</head>
<body>
<div class="btn" id="btn">點我.btn</div>
<div class="btn" id="test2">點我test2</div>
<div class="btn" id="parentIframe">點我parentIframe</div>
<div class="btn" id="test4">點我test4</div>
<div class="btn" id="test5">點我test5</div>
<!--你必須先引入jQuery1.8或以上版本-->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(function(){
$("#btn").bind("click",function(){
layer.msg('點我的人最美！');
});
//彈出一個頁面層
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //點擊遮罩關閉
content: '\<\div style="padding:20px;">自定義內容--添加自己需要的描述內容\<\/div>'
});
});
//彈出一個iframe層
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe父子操作',
maxmin: true,
shadeClose: true, //點擊遮罩關閉層
area : ['800px' , '520px'],
content: 'parentIframe.html'
});
});
//彈出一個loading層
$('#test4').on('click', function(){
var ii = layer.load();
//此處用setTimeout演示ajax的回調
setTimeout(function(){
layer.close(ii);
}, 1000);
});
//彈出一個tips層
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
});
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/layer.css"/>
<style type="text/css">
.btn:nth-child(odd){
width: 100%;
height: 50px;
line-height: 50px;
background: magenta;
text-align: center;
font-size: 15px;
}
.btn:nth-child(even){
width: 100%;
height: 50px;
line-height: 50px;
background: aqua;
text-align: center;
font-size: 15px;
}
#test5{
text-align: center;
width: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="btn" id="btn">點我.btn</div>
<div class="btn" id="test2">點我test2</div>
<div class="btn" id="parentIframe">點我parentIframe</div>
<div class="btn" id="test4">點我test4</div>
<div class="btn" id="test5">點我test5</div>
<div class="btn" id="test6">點我test6</div>
<div class="btn" id="test7">點我test7</div>
<div class="btn" id="test8">點我test8</div>
<div class="btn" id="test9">點我test9</div>
<!--你必須先引入jQuery1.8或以上版本-->
<script src="js/jquery-2.1.0.js"></script>
<script src="js/layer/layer.js"></script>
<script>
$(function(){
$("#btn").bind("click",function(){
layer.msg('點我的人最美！');
});
//彈出一個頁面層
$('#test2').on('click', function(){
layer.open({
type: 1,
area: ['600px', '360px'],
shadeClose: true, //點擊遮罩關閉
content: '\<\div style="padding:20px;">自定義內容--添加自己需要的描述內容\<\/div>'
});
});
//彈出一個iframe層
$('#parentIframe').on('click', function(){
layer.open({
type: 2,
title: 'iframe父子操作',
maxmin: true,
shadeClose: true, //點擊遮罩關閉層
area : ['800px' , '520px'],
content: 'parentIframe.html'
});
});
//彈出一個loading層
$('#test4').on('click', function(){
var ii = layer.load();
//此處用setTimeout演示ajax的回調
setTimeout(function(){
layer.close(ii);
}, 1000);
});
//彈出一個tips層
$('#test5').on('click', function(){
layer.tips('Hello tips!', '#test5');
});
//======================================
//多窗口模式，層疊置頂
$('#test6').on('click', function(){
layer.open({
type: 2 //此處以iframe舉例
,title: '當你選擇該窗體時，即會在最頂端'
,area: ['390px', '330px']
,shade: 0
,offset: [ //為了演示，隨機坐標
Math.random()*($(window).height()-300)
,Math.random()*($(window).width()-390)
]
,maxmin: true
,content: 'settop.html'
,btn: ['繼續彈出', '全部關閉'] //只是為了演示
,yes: function(){
$(that).click(); //此處只是為了演示，實際使用可以剔除
}
,btn2: function(){
layer.closeAll();
}
,zIndex: layer.zIndex //重點1
,success: function(layero){
layer.setTop(layero); //重點2
}
});
});
//配置一個透明的詢問框
$('#test7').on('click', function(){
layer.msg('大部分參數都是可以公用的<br>合理搭配，展示不一樣的風格', {
time: 20000, //20s后自動關閉
btn: ['明白了', '知道了', '哦']
});
});
//示范一個公告層
$('#test8').on('click', function(){
layer.open({
type: 1
,title: false //不顯示標題欄
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //設定一個id，防止重復彈出
,resize: false
,btn: ['火速圍觀', '殘忍拒絕']
,btnAlign: 'c'
,moveType: 1 //拖拽模式，0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">內容<br>內容</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
href: 'http://www.layui.com/'
,target: '_blank'
});
}
});
});
//邊緣彈出
$('#test9').on('click', function(){
layer.open({
type: 1
,offset: 'c' //具體配置參考：offset參數項(t、r、b、l、c)
,content: '<div style="padding: 20px 80px;">內容</div>'
,btn: '關閉全部'
,btnAlign: 'c' //按鈕居中
,shade: 0 //不顯示遮罩
,yes: function(){
layer.closeAll();
}
});
});
});
</script>
</body>
</html>以上就是layui-layer獨立組件-彈出層介紹的詳細內容，更多請關注億速云其它相關文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
