如何使用layer展示弹窗（包含QQ图标打开QQ事件）

最新推荐文章于 2021-06-03 07:43:45 发布

GuanJdoJ

最新推荐文章于 2021-06-03 07:43:45 发布

阅读量751

点赞数

分类专栏：工具使用文章标签： layer css

本文链接：https://blog.csdn.net/GuanJdoJ/article/details/90611644

版权

工具使用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、展示

或者查看在线演示

二、代码

html

<!DOCTYPE html>
<html>
<head>
  <title>hover-tips</title>
  <!--阿里矢量图库引入图标样式-->
  <link rel="stylesheet" href="https://at.alicdn.com/t/font_1213440_afnvx78jhfm.css">
  <!--引入layer.css-->
  <link rel="stylesheet" href="https://cdn.staticfile.org/layer/2.3/skin/layer.css">
  <!--引入jquery-->
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <!--引入layer.js-->
  <script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
</head>
<body>
<div class="div0">
  <input type="hidden" id="layer_mobile" value="13912341234"/>
  <input type="hidden" id="layer_qq" value="123"/>
  <a href="javascript:;" class="tips-info">
    <i class="iconfont icon_prd_2lianxikefu-biger"></i>
  </a>
</div>
</body>

</html>

要用到layer，需要引入layer.js和layer.css文件，在实际开发中可以直接从官网（https://www.layui.com/）把文件下载下来放到项目中，我这里是用的Staticfile CDN的开源库：http://www.staticfile.org/，图标则是使用的阿里矢量图库中的iconfont

js

var timer;
/*悬浮展示信息效果---start*/
$(document).on({
          mouseenter: function () {
          clearTimeout(timer);
          var mobile = $("#layer_mobile").val();
          var qq = $("#layer_qq").val();
          var qqExist = function () {
              if (qq) {
                  return '<li><label htmlFor="">QQ：</label><a href="tencent://message?uin='+qq+'&Site=&menu=yes"><i class="iconfont icon_prd_qq2"></i></a></li>';
                    }
                  return '';
                };
           layer.tips(
                    '<div class="layer-tips-info">' +
                    '<ul>' +
                    '<li><label htmlFor="">电话：</label>'+ mobile +'</li>' +
                    '<li><label htmlFor="">手机：</label>13912341234</li>' +
                    qqExist() +
                    '</ul></div>',
                    $(this), {
                        tips: [1, '#fff'],
                        time: ''
                    })
            },
            mouseleave: function () {
                timer = setTimeout(function () {
                    layer.closeAll();
                }, 500);
            }
        }, '.tips-info');
/*悬浮展示信息效果---end*/
/*鼠标指到tips上时让tips不会消失---start*/
$(document).on({
      mouseenter: function () {
           clearTimeout(timer)
      },
      mouseleave: function () {
           layer.closeAll();
      }
    }, '.layui-layer-tips');
/*鼠标指到tips上时让tips不会消失---end*/

mouseenter：当鼠标指针穿过元素时，会发生 mouseenter 事件。jQuery 事件 - mouseenter() 方法

mouseleave：当鼠标指针离开元素时，会发生 mouseleave 事件。jQuery 事件 - mouseleave() 方法

layer.tips(content,follow,options) tips层

content：tips中需要展示的内容

follow：#id或者.class

options：可选，tips参数，控制tips的方向和颜色，1-上、默认(2)-右、3-下、4-左。例如tips: [1, '#fff']

更多用法：http://layer.layui.com/

打开qq控件：<a href="tencent://message?uin=oneQqNum&Site=&menu=yes">

oneQqNum写想要打开的qq，其他地方写死就行

css

body{
  font: 12px/1 Microsoft Yahei, Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
}
ul{
  list-style: none;
  padding:0;
}
.div0{
  margin-left:100px;
  margin-top:200px;
}
.layer-tips-info {
  color: #000;
  width: 200px;
  padding: 10px; 
}
.layer-tips-info li {
    margin-bottom: 10px;
}

.layer-tips-info li label {
   color: #000;
   margin-right: 5px; 
}