首页 > 代码库 > 在指定位置上方出现通用jquery悬浮提示框插件
在指定位置上方出现通用jquery悬浮提示框插件
工作需要,网站悬浮提示框要求出现在指定元素上方,由于工作量修改比较大所以要求全站通用,所以写了一个juqery插件,插件很简单,大家可以自行更改样式。
请转载此文的朋友务必附带原文链接,谢谢。
原文链接:http://xuyran.blog.51cto.com/11641754/1876266
插件代码如下:
//提示框插件 ; (function ($) { $.fn.tooltips = function (options) { $.fn.tooltips.defaults = { txt: "", left: "", width:"180" } var opts = $.extend({}, $.fn.tooltips.defaults, options); return this.each(function () { $this = $(this); $this.css({ position: "relative" }); var elem = ‘<div class="alert-box-small02">‘ + opts["txt"] + ‘</div>‘; //在对象里面追加提示框 $this.append(elem); var boxWidth = parseInt(opts["width"]); //获取提示框默认宽度 var thisWidth = $this.width(); var divLeft = opts["left"] == "" ? -parseInt((boxWidth - thisWidth) / 2) : opts["left"]; //如果没有设置left值,默认居中 $this.find(".alert-box-small02").css({ bottom: $this.height() + 6, left: divLeft + ‘px‘, width:opts["width"] }); $this.find(".alert-box-small02").slideDown(100).delay("2000").fadeOut(200); setTimeout(function () { //移除提示框节点 $this.find(".alert-box-small02").remove(); }, 2400) }); } })(jQuery);
css代码:
.alert-box-small02{line-height:35px;background: rgba(0,0,0,.8);position: absolute;height: 35px;display: none;width: 180px; font-size: 14px;font-weight: bold;color: #FFFFFF;text-align: center;border-radius: 5px;padding:0 10px;bottom: 0;z-index:888;}
调用方法:
$(selector).tooltips({ txt:"提示框2测试提示框2测试提示框2测试提示框2测试提示框2测试", left:"0px" });
效果如下:
在指定位置上方出现通用jquery悬浮提示框插件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。