2017-08-21 08:51:13 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
2021-03-31 14:07:23 +08:00
|
|
|
|
<title>layer 弹层 - layui</title>
|
2017-08-21 08:51:13 +08:00
|
|
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="../src/css/layui.css">
|
|
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
body{padding: 100px;}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
2021-03-31 14:07:23 +08:00
|
|
|
|
<div class="layui-btn-container">
|
|
|
|
|
|
<button class="layui-btn layui-btn-primary demo" data-type="test">Alert</button>
|
|
|
|
|
|
<button class="layui-btn demo" data-type="test2">Confirm</button>
|
|
|
|
|
|
<button class="layui-btn demo" data-type="test3">Msg</button>
|
|
|
|
|
|
<button class="layui-btn demo" data-type="test4">Tips</button>
|
|
|
|
|
|
<button class="layui-btn demo" data-type="test5">Page</button>
|
|
|
|
|
|
<button class="layui-btn demo" data-type="test6">Iframe</button>
|
|
|
|
|
|
<button class="layui-btn demo" data-type="test7">Prompt</button>
|
|
|
|
|
|
<button class="layui-btn demo" data-type="test8">Tab</button>
|
|
|
|
|
|
<a href="http://layer.layui.com/" target="_blank" class="layui-btn demo">更多例子</a>
|
|
|
|
|
|
</div>
|
2017-08-21 08:51:13 +08:00
|
|
|
|
|
|
|
|
|
|
<div id="test11111" style="display: none;padding: 20px;">
|
|
|
|
|
|
123
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="../src/layui.js"></script>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
layui.use('layer', function(){
|
|
|
|
|
|
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
|
|
|
|
|
|
|
2021-03-31 14:07:23 +08:00
|
|
|
|
|
|
|
|
|
|
layer.msg('hello');
|
|
|
|
|
|
|
2017-08-21 08:51:13 +08:00
|
|
|
|
//触发事件
|
|
|
|
|
|
var active = {
|
|
|
|
|
|
test: function(){
|
|
|
|
|
|
layer.alert('你好么，体验者');
|
|
|
|
|
|
}
|
|
|
|
|
|
,test2: function(){
|
|
|
|
|
|
layer.confirm('您是如何看待前端开发？', {
|
|
|
|
|
|
btn: ['重要','奇葩'] //按钮
|
|
|
|
|
|
}, function(){
|
|
|
|
|
|
layer.msg('的确很重要', {icon: 1});
|
|
|
|
|
|
}, function(){
|
|
|
|
|
|
layer.msg('也可以这样', {
|
|
|
|
|
|
time: 20000, //20s后自动关闭
|
|
|
|
|
|
btn: ['明白了', '知道了']
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
,test3: function(){
|
|
|
|
|
|
layer.msg('玩命提示中');
|
|
|
|
|
|
}
|
|
|
|
|
|
,test4: function(){
|
|
|
|
|
|
layer.tips('Hi，我是一个小提示', this, {tips: 1});
|
|
|
|
|
|
}
|
|
|
|
|
|
,test5: function(){
|
|
|
|
|
|
layer.open({
|
|
|
|
|
|
title:'更新论坛信息',
|
|
|
|
|
|
type: 1,
|
|
|
|
|
|
skin: 'layui-layer-rim',
|
2021-03-31 14:07:23 +08:00
|
|
|
|
area: ['1000px', '580px'],
|
2017-08-21 08:51:13 +08:00
|
|
|
|
content: $('#test11111')
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
,test6: function(){
|
|
|
|
|
|
layer.open({
|
|
|
|
|
|
type: 2
|
2021-03-31 14:07:23 +08:00
|
|
|
|
,content: 'https://www.aliyun.com/activity?userCode=ap0255is'
|
2017-08-21 08:51:13 +08:00
|
|
|
|
,area: ['375px', '500px']
|
|
|
|
|
|
,maxmin: true
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
,test7: function(){
|
|
|
|
|
|
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
|
|
|
|
|
|
layer.close(index);
|
|
|
|
|
|
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
|
|
|
|
|
|
layer.close(index);
|
|
|
|
|
|
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
,test8: function(){
|
|
|
|
|
|
layer.tab({
|
|
|
|
|
|
area: ['600px', '300px'],
|
|
|
|
|
|
tab: [{
|
|
|
|
|
|
title: 'TAB1',
|
|
|
|
|
|
content: '内容1'
|
|
|
|
|
|
}, {
|
|
|
|
|
|
title: 'TAB2',
|
|
|
|
|
|
content: '内容2'
|
|
|
|
|
|
}, {
|
|
|
|
|
|
title: 'TAB3',
|
|
|
|
|
|
content: '内容3'
|
|
|
|
|
|
}]
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
$('.demo').on('click', function(){
|
|
|
|
|
|
var type = $(this).data('type');
|
|
|
|
|
|
active[type] ? active[type].call(this) : '';
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
