本篇文章给大家带来的内容是关于点击HTML页面问号出现提示框（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
本demo的功能：点击页面按钮在其边缘出现提示信息，点击页面任何一处则消失。
如下图：
1.所需插件：
jquery插件；
立即学习“前端免费学习笔记（深入）”；
layer插件；
2.HTML内容：
==注意==：
class=”j-help-tips”这个class是核心，不可缺少。
data-tips属性是必须的。
data-tips属性中：type：”1″不用修改；
data-tips属性中：txt内容即是要提示的内容。
① ② ③$(function(){ var tips = new helpTips().init(); })
3.css内容：（非必要）
本demo的css非必须，不影响功能；
.edi-icon { font-size: 18px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: .2px; -moz-osx-font-smoothing: grayscale; *display: inline; *zoom: 1; cursor: pointer;}
4.javascript内容：（核心）
//定义提示弹出框；var helpTipsLayer;//定义弹出框的默认设置；function helpTips(t) { this.options = {}, this.options.elem = ".j-help-tips", //与页面class相对应； this.options.type = 1, this.options.color = "#8db3d7", this.options.time = 0, //设置0是提示弹出框不会自动消失；可设置为其他数字，以毫秒为单位； this.options.titleEnd = "录入提示", this.options.width = "600px", this.options.height = "", this.options.imgWidth = "233", this.options.imgHeight = "375", "undefined" != typeof t && (this.options = $.extend({}, this.options, t)), this.elemObj = $(this.options.elem)}!function() { //点击页面任何一处可使提示弹出框消失； $(document).on("click", function(event){ var e = event || window.event; var target = e.target || e.srcElement; var flag = $(target).hasClass("j-help-tips"); if(helpTipsLayer && !flag){ layer.close(helpTipsLayer); } })}(), helpTips.prototype = { constructor : helpTips, init : function() { this.bindEvent() }, bindEvent : function() { var t = this; t.elemObj.on("click", function() { layer.close(helpTipsLayer);//点击其他任意的提示框按钮，则关闭上一个提示框。 var i = $(this), o = i.data("tips"); if ("undefined" != typeof o && "undefined" != typeof o.type && 1 == o.type) { "undefined" != typeof o && "undefined" != typeof o.txt ? helpTipsLayer = layer.tips(o.txt, i, { tips : [ t.options.type, t.options.color ], time : t.options.time }) : t.log() } else { if ("undefined" != typeof o.title && "undefined" != typeof o.txt && "undefined" != typeof o.img) { var e = '', n = '
' + o.title + t.options.titleEnd + '
', s = "", l = '- ', p = o.txt.split("|"), a = p.length; a > 0 && $.each(p, function(t, i) { l += '
- ' + (t + 1) + "" + i + " " }); var r = /^[1-9][d]{0,2}$/, c = t.options.imgWidth, d = t.options.imgHeight; "undefined" != typeof o.w && "undefined" != typeof o.h && r.test(o.w) && r.test(o.h) && (c = o.w, d = o.h), l += '
- ' + (a + 1) + "@@##@@ ', l += "
以上就是点击HTML页面问号出现提示框（附源码）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1547611.html
微信扫一扫 
支付宝扫一扫 
