溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
工作需要，網站懸浮提示框要求出現在指定元素上方，由于工作量修改比較大所以要求全站通用，所以寫了一個juqery插件，插件很簡單，大家可以自行更改樣式。
請轉載此文的朋友務必附帶原文鏈接，謝謝。
原文鏈接：http://xuyran.blog.51cto.com/11641754/1876266
插件代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Content/js/jquery-1.9.1.min.js"></script>
</head>
<style>
/*遮罩*/
*{margin: 0px; padding: 0px;font-family: "微軟雅黑";}
.test1{width: 300px;margin-top: 200px;border: solid 1px #37C3FF;margin-left: 400px;}
.test2{width: 600px;margin-top: 200px;border: solid 1px #37C3FF;margin-left: 400px;height: 500px;}
alert-box-small02{line-height:35px;background: rgba(0,0,0,.8);position: absolute;height: 35px;display: none;min-width: 180px;
font-size: 18px;font-weight: bold;color: #FFFFFF;text-align: center;border-radius: 5px;bottom: 0;z-index: 100;}
</style>
<script>
//提示框插件
;(function($) {
$.fn.tooltips = function(options){
$.fn.tooltips.defaults = {
txt:"",
left:""
}
var opts = $.extend({}, $.fn.tooltips.defaults, options);
return this.each(function(){
$this = $(this);
var lf = $this.offset().left; //獲取當前元素相對于文檔窗口左偏移
var rt = $this.offset().top;//獲取當前元素相對于文檔窗口上偏移
var bo = $(window).height() - rt; //獲取指定出現的下偏移，此處為了實現從下往上滑出效果，因此需要給其定位bottom屬性
var elem = '<div class="alert-box-small02">' + opts["txt"] + '</div>';
$("body").append(elem);
var boxWidth = $(".alert-box-small02").outerWidth();
var divLeft = opts["left"] == ""? -(boxWidth-$this.outerWidth())/2:opts["left"];
$(".alert-box-small02").css({
bottom:bo + 6,
left:parseInt(divLeft） + lf +'px'
});
$(".alert-box-small02").slideDown("fast").delay("400").fadeOut(200);
setTimeout(function(){
$(".alert-box-small02").remove();
},800);
});
}
})(jQuery);
//調用,全站通用
$(function(){
$("#button02").tooltips({
txt:"提示框1測試提示框1測試提示框1",
left:"0"
});
$(".test1").tooltips({txt:"dsdfadfafaf"});
$(".test2").tooltips({
txt:"提示框2測試提示框2測試提示框2測試提示框2測試提示框2測試",
});
})
</script>
<body>
<button id="button02" >提示框</button>
<div class="test1">
<p>作為守望先鋒的創始成員之一，安娜利用她的技巧和專長保護家園和最親密的人。</p>
<p>智械危機期間，當埃及遭到沉重打擊后，這個國家的精銳狙擊手們為元氣大傷的安全部隊提供了強有力的支援，其中就包括安娜·艾瑪莉——世界公認的最出色的狙擊手之一。她的精準、果斷和直覺使其自然而然地成為了守望先鋒突擊部隊的一員，最終結束了這場智械危機。</p>
</div>
<div class="test2">
<p>作為守望先鋒的創始成員之一，安娜利用她的技巧和專長保護家園和最親密的人。</p>
<p>智械危機期間，當埃及遭到沉重打擊后，這個國家的精銳狙擊手們為元氣大傷的安全部隊提供了強有力的支援，其中就包括安娜·艾瑪莉——世界公認的最出色的狙擊手之一。她的精準、果斷和直覺使其自然而然地成為了守望先鋒突擊部隊的一員，最終結束了這場智械危機。</p>
</div>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
