您的位置：首页 > 其它

Layer弹出层

2017-03-18 14:44 127 查看

用过很多弹出层的插件，自己也模拟了几个，但是不论样式还是可操作性，我个人还是比较推荐LayerUI.
当然，这里面组件很多，除了弹出层之外还有其他常见效果。感兴趣的朋友可以自己在官网查看。官网：http://www.layui.com/doc/modules/layer.html

废话不多说，源码奉上：

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>layer弹出层练习</title>
</head>
<body>
<button id="test1">小小提示层</button>
<button id="test2">小小提示层</button>

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script src="//cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script>

// 提示1
$('#test1').on('click', function(){
layer.open({
content: '查询错误！'
,btn: ['确定', '取消']
,area: ['500px', '200px']
,shade: [0.3, '#999']
,yes: function(index, layero){
//确定的回调,这里点击确定之后弹出框不会关闭，这时候需要手动关闭。
alert("确定!")
layer.close(index); //如果设定了yes回调，需进行手工关闭
},btn2: function(index, layero){
//取消的回调
alert("取消!")
}
,cancel: function(){
//右上角关闭回调
alert("关闭!")
}
});
});

// 提示2
$('#test2').on('click', function(){
layer.open({
title: '系统提示'//标题
,content: '查询错误'//内容
,area: ['500px', '200px']//宽高如果不设置，默认都是自适应，只设置宽度，高度也是自适应，默认水平居中
,shade: [0.3, '#999']//shade指遮罩层颜色，第一个参数是透明度，第二个是颜色
});
});

//当然，参数不止这几个，这里面只介绍了常见的几个。有兴趣的朋友可以自己上官网查看。
</script>
</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 插件 layer弹出层

相关文章推荐

新的分享

章节导航