jquery鼠标移入弹出层_Layer弹出层

最新推荐文章于 2023-04-23 11:42:00 发布

PTE柒加

最新推荐文章于 2023-04-23 11:42:00 发布

阅读量264

点赞数

文章标签： jquery鼠标移入弹出层

本文链接：https://blog.csdn.net/weixin_42512103/article/details/113708609

版权

用过很多弹出层的插件，自己也模拟了几个，但是不论样式还是可操作性，我个人还是比较推荐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>

PTE柒加

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery鼠标移入弹出层_Layer弹出层

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

扫一扫