使用jquery1.12.4以上版本
使用jquery插件 tips
.beg-pull-right 點選時的選擇器 在這裡寫的是一個類選擇器
記得引入jquery
$(".beg-pull-right").click(function () {
var name = $("#name").val();
var pwd = $("#password").val();
//alert(name + " " + pwd)
if (name=="") {
$("#name").tips({
side: 1,
msg: '名字不能為空',
color: 'white',
bg: '#F7B824',
time: 2,
x: 0,
y: 0
})
} else if(pwd=="") {
$("#password").tips({
side: 1,
msg: '密碼不能為空',
color: 'white',
bg: '#F7B824',
time: 2,
x: 0,
y: 0
})
} else {
$.ajax({
type: "Post", //方法
url: "login.aspx/lo", //url
contentType: "application/json; charset=utf-8", //資料格式
data: "{\"name\":\""+name+"\",\"pwd\":\""+pwd+"\"}", //資料
dataType: "json", //資料格式
success: function (data) {
if (data.d=="N") {
$("#password").tips({
side: 3,
msg: '密碼錯誤哦!',
color: 'white',
bg: '#F7B824',
time: 2,
x: 0,
y: 0
})
} else {
window.location.href = "index.aspx";
}
}
//成功後的回調函數
});
}
})
下面是tips源代碼 有功能使用說明
/**
* jquery tips 提示插件 jquery.tips.js v0.1beta
*
* 使用方法
* $(selector).tips({ //selector 為jquery選擇器
* msg:'your messages!', //你的提示消息 必填
* side:1, //提示窗顯示位置 1,2,3,4 分别代表 上右下左 預設為1(上) 可選
* color:'#FFF', //提示文字色 預設為白色 可選
* bg:'#F00',//提示窗背景色 預設為紅色 可選
* time:2,//自動關閉時間 預設2秒 設定0則不自動關閉 可選
* x:0,//橫向偏移 正數向右偏移 負數向左偏移 預設為0 可選
* y:0,//縱向偏移 正數向下偏移 負數向上偏移 預設為0 可選
* })
*
*
*/
(function ($) {
$.fn.tips = function (options) {
var defaults = {
side: 1,
msg: '',
color: '#FFF',
bg: '#F00',
time: 2,
x: 0,
y: 0
}
var options = $.extend(defaults, options);
if (!options.msg || isNaN(options.side)) {
throw new Error('params error');
}
if (!$('#jquery_tips_style').length) {
var style = '<style id="jquery_tips_style" type="text/css">';
style += '.jq_tips_box{padding:10px;position:absolute;overflow:hidden;display:inline;display:none;z-index:10176523;}';
style += '.jq_tips_arrow{display:block;width:0px;height:0px;position:absolute;}';
style += '.jq_tips_top{border-left:10px solid transparent;left:20px;bottom:0px;}';
style += '.jq_tips_left{border-top:10px solid transparent;right:0px;top:18px;}';
style += '.jq_tips_bottom{border-left:10px solid transparent;left:20px;top:0px;}';
style += '.jq_tips_right{border-top:10px solid transparent;left:0px;top:18px;}';
style += '.jq_tips_info{word-wrap: break-word;word-break:normal;border-radius:4px;padding:5px 8px;max-width:130px;overflow:hidden;box-shadow:1px 1px 1px #999;font-size:12px;cursor:pointer;}';
style += '</style>';
$(document.body).append(style);
}
this.each(function () {
var element = $(this);
var element_top = element.offset().top, element_left = element.offset().left, element_height = element.outerHeight(), element_width = element.outerWidth();
options.side = options.side < 1 ? 1 : options.side > 4 ? 4 : Math.round(options.side);
var sideName = options.side == 1 ? 'top' : options.side == 2 ? 'right' : options.side == 3 ? 'bottom' : options.side == 4 ? 'left' : 'top';
var tips = $('<div class="jq_tips_box"><i class="jq_tips_arrow jq_tips_' + sideName + '"></i><div class="jq_tips_info">' + options.msg + '</div></div>').appendTo(document.body);
tips.find('.jq_tips_arrow').css('border-' + sideName, '10px solid ' + options.bg);
tips.find('.jq_tips_info').css({
color: options.color,
backgroundColor: options.bg
});
switch (options.side) {
case 1:
tips.css({
top: element_top - tips.outerHeight() + options.x,
left: element_left - 10 + options.y
});
break;
case 2:
tips.css({
top: element_top - 20 + options.x,
left: element_left + element_width + options.y
});
break;
case 3:
tips.css({
top: element_top + element_height + options.x,
left: element_left - 10 + options.y
});
break;
case 4:
tips.css({
top: element_top - 20 + options.x,
left: element_left - tips.outerWidth() + options.y
});
break;
default:
}
var closeTime;
tips.fadeIn('fast').click(function () {
clearTimeout(closeTime);
tips.fadeOut('fast', function () {
tips.remove();
})
})
if (options.time) {
closeTime = setTimeout(function () {
tips.click();
}, options.time * 1000);
tips.hover(function () {
clearTimeout(closeTime);
}, function () {
closeTime = setTimeout(function () {
tips.click();
}, options.time * 1000);
})
}
});
return this;
};
})(jQuery);
如有不對之處請前輩們指出謝謝!