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

编程之家收集整理的这篇文章主要介绍了如何使用layer展示弹窗(包含QQ图标打开QQ事件)编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

搜索热词

使用layer展示弹窗的实现HTML代码效果看起来还不错,需要的朋友赶紧用起来。

一、效果展示

或者查看 在线演示

二、代码

以下是具体的实现代码片段,大家根据顺序复制添加即可。

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

总结

以上是编程之家为你收集整理的如何使用layer展示弹窗(包含QQ图标打开QQ事件)全部内容,希望文章能够帮你解决如何使用layer展示弹窗(包含QQ图标打开QQ事件)所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群:1065694478(已满)
编程之家官方2群:163560250(已满)
编程之家官方3群:312128206(已满)
编程之家官方4群:230427597

相关文章

猜你在找的HTML相关文章

使用layer展示弹窗的实现html代码,效果看起来还不错,需要的朋友赶紧用起来。一、效果展示
如果想用程序模拟在浏览器中使用百度搜索的结果,最先想到的就是爬虫了,然而,还有一个更简单的方式可以使用,那就行直接使用百度的 API ,返回是 json 格式的数据,简直不要太爽。。。API:https://www.baidu.com/s?wd=apple&amp;pn=1&amp;rn=10&amp;tn=json参数说明:wd:关键词pn : 查询偏移位置(偏移位置对应...
转载声明:http://blog.csdn.net/marksinoberg/article/details/52875610版权声明:本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载时请标注http://blog.csdn.net/marksinoberg.目录(?)[+]ECh
最普通最常用最一般的方法就是用submit type..看代码:    另外,还有一种常用的方法是使用图片:     第三种是使用链接来提交表单,用到了JavaScript的DOM模型:    提交这种方法实际上是调用了一个javascript函数,使用javacript函数来提交表单,方法就非
MathJax是一款相当强悍的在网页显示数学公式的插件。本教程介绍MathJax如何使用LaTeX语法编写数学公式。1.如何插入公式LaTeX的数学公式有两种:行中公式和独立公式。行中公式放在文中与其它文字混编,独立公式单独成行。行中公式可以用如下两种方法表示:\(数学公式\)或¥数学公式¥(要把人民币符号换成美元符号)独立公式可以用如下两种方法表示:
Ryan Zhao学习、实践、分享GitHub RSSMathjax与LaTex公式简介Mar 3, 2015   #MathJax  #公式  #LaTex  #tutorial 本文从math.stackexchange.com上名为MathJax basic tutorial and quick referenc
JS Sequence Diagrams 官网最新下载JS Sequence Diagrams 在线编译和教程jQuery 官网最新下载JS Sequence Diagrams 安装及使用时序图(Sequence Diagram),亦称为序列图或循序图,是一种UML行为图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。它可以表示用例的行为顺序,当执行一个用例行为时,时序图中的每条消
HTML 基本文档文档标题可见文本...基本标签(Basic Tags)最大的标题 . . . . . . . . . . . . 最小的标题这是一个段落。 (换行) (水平线)文本格式化(Formatting)粗体文本计算机代码强调文本斜体文本键盘输入 预格式