JQuery實現簡單時尚快速的氣泡提示外掛_jquery

在程式提交後，我們需要驗證並提示出錯的位置，利用JQuery我們可以輕鬆實現氣泡提示，先看效果圖：

具體呼叫程式碼：

複製程式碼 程式碼如下:

程式碼如下:

其實作過程如下：

1、首先我們在Photoshop中設計出提示框的形狀及背景。

2、我們將背景切成三個部分，top、main、bottom

頂部：

main：

bottom：

3、定義提示框的CSS檔案

複製程式碼 程式碼如下:

程式碼如下:



. tooltip{
position:absolute; height:200px;
width:300px;
padding:10px;
}
.tooltip_main{
png);
background-position:center;
background-repeat:repeat-y;
padding-left:30px;
padding-right:30px;
color:#C00;
font-weight:bold;
}

.tooltip_top{
width:300px;
height:40px;
background-image:url(>height:40px;
background-image:url( ;
background-repeat:no-repeat;
background-position:bottom;
}

.tooltip_bottom{
width:300px;

height:20p; >background-image:url(images/tooltip_bottom.png);
background-repeat:no-repeat;
background-position:top;

}4、建立Tooltip類，實作如下：

複製程式碼


程式碼如下:


var Tooltip =var ;

Tooltip.show = function(msg,obj){
$('#' obj).after('

'
'

'
'

' msg '

'
'

div>'
'

');
//調整位置
var objOffset = $('#' obj).offset();
objOffset.left-=25;
objOffset.top-=10;
$('#tooltip_' obj).offset(objOffset);
//點擊消失
$('#tooltip_' obj).click(function() {

$(this).hide(); $('#' obj).focus(); }); }