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

一、展示

或者查看 在线演示

二、代码

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 '
QQ：
';
                    }
                  return '';
                };
           layer.tips(
                    '
' +
                    '
' +
                    '
电话：'+ mobile +'
' +
                    '
手机：13912341234
' +
                    qqExist() +
                    '
',
                    $(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控件：

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; 
}