大家好，欢迎来到IT知识分享网。
用过很多弹出层的插件，自己也模拟了几个，但是不论样式还是可操作性，我个人还是比较推荐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>
<!–先引入jquery，然后引入layer.js，然后调用就可以了–>
<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>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/11449.html
