基于JQuery 的消息提示框效果代碼
更新時間：2011年07月31日 20:21:04 作者：
本身不熟悉js略懂JQuery，閑著沒事幫朋友公司一個程序小伙修改了個消息提示框，把修改后的代碼和代價分享一下
詳細內容請下載附件 附件下載
先看一下效果： 
復制代碼 代碼如下:
var returnurl = '';
var messagebox_timer;
$.fn.messagebox = function (message, url, type, delay) {
clearTimeout(messagebox_timer);
$("#msgprint").remove();
var m_body = $(this);
delay = (typeof delay == "undefined" ? 5000 : delay);
returnurl = url;
var box_style = 'position:absolute;display:none;z-index:1000;padding:10px 30px 10px 40px;';
switch (type) {
case 1: box_style += 'border:1px solid Green;color:#090;background:url(../Icons/ok.png) 10px 10px no-repeat #F1FEF2;'; break;
case 0: box_style += 'border:1px solid Red;color:#EE1010;background:url(../Icons/error.png) 10px 10px no-repeat #FDF8E8;'; break;
default: box_style += 'border:1px solid Orange;color:Orange;background:url(../Icons/warning.png) 10px 10px no-repeat #FEFDE9;'; break
}
var str = "<div id=\"msgprint\" style=\"" + box_style + "\">" + message + "</div>"; m_body.append(str);
var dom_obj = document.getElementById("msgprint");
var ext_width = $("#msgprint").width();
dom_obj.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - dom_obj.offsetHeight - $("#msgprint").height()) / 2) + "px";
dom_obj.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - dom_obj.offsetWidth - $("#msgprint").width()) / 2) + "px";
$("#msgprint").fadeIn(1000, function () { messagebox_timer = setTimeout(messagebox_out, delay) });
};
function messagebox_out() {
if (returnurl == undefined || returnurl == '') { $("#msgprint").fadeOut(1000) }
if (returnurl == "back") { this.history.back(-1) } else if (returnurl != "" && returnurl != undefined) { this.location.href = returnurl }
}
引用的js文件：
復制代碼 代碼如下:
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="Scripts/Jquery.L.Message.js" type="text/javascript"></script>
頁面代碼：
復制代碼 代碼如下:
<body>
<div id="hello" style="height: 350px;">
<ul><li><a href="javascript:$('#hello').messagebox('成功提示<br/>成功提示', 'http://localhost:5083/', 1, 20000);">成功，20秒后跳轉</a></li>
<li> <a href="javascript:$('#hello').messagebox('錯誤提示<br/>錯誤提示', '', 0, 1000);">失敗，1秒消失</a></li>
<li> <a href="javascript:$('body').messagebox('這是警告<br/>這是警告', 'back', 2);">警告，默認時間5秒后后退</a></li></ul></div></body>
您可能感興趣的文章:
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- 基于jquery的氣泡提示效果
- JQuery實現(xiàn)簡單時尚快捷的氣泡提示插件
- jquery.cvtooltip.js 基于jquery的氣泡提示插件
- Jquery插件分享之氣泡形提示控件grumble.js
- jQuery插件HighCharts實現(xiàn)氣泡圖效果示例【附demo源碼】
- jQuery bt氣泡實現(xiàn)懸停顯示及移開隱藏功能的方法
- jquery實現(xiàn)鼠標滑過顯示提示框的方法
- Jquery實現(xiàn)鼠標移上彈出提示框、移出消失思路及代碼
- jquery懸浮提示框完整實例
- jQuery實現(xiàn)鼠標放置名字上顯示詳細內容氣泡提示框效果的方法分析
相關文章
老規(guī)矩，先上html和css,還是用官方的，只是去掉了些東西2012-07-07
使用EVAL處理jqchart jquery 折線圖返回數(shù)據(jù)無效的解決辦法
eval函數(shù)可以把一些處理過程序代碼進行解析從而達到可以執(zhí)行的一個狀態(tài)，本篇文章給大家介紹使用eval處理jqchart jquery折線圖返回數(shù)據(jù)無效的解決辦法，對jqchart jquery相關內容感興趣的朋友一起學習吧2015-11-11
jQuery實現(xiàn)簡單復制json對象和json對象集合操作示例
這篇文章主要介紹了jQuery實現(xiàn)簡單復制json對象和json對象集合操作,結合實例形式分析了jQuery使用extend方法操作json對象與json對象集合復制相關技巧,需要的朋友可以參考下2018-07-07
基本選擇器：是jQuery中使用最頻繁的選擇器，它由元素Id、Class、元素名、多個選擇符組成，通過基本選擇器可以實現(xiàn)大多數(shù)頁面元素的查找，感興趣的朋友可以參考下哈2013-04-04
現(xiàn)在jquery應用的越來越多, 有些同學在享受爽快淋漓coding時就將性能問題忽略了, 比如我. jquery雖在諸多的js類庫中性能表現(xiàn)還算優(yōu)秀, 但畢竟不是在用原生的javascript開發(fā), 性能問題還是需要引起重視的.2010-02-02
這篇文章主要介紹了jQuery內容過濾選擇器用法,結合實例形式分析了jQuery中使用contains、empty、has、parent等進行內容過濾的操作技巧,需要的朋友可以參考下2016-09-09
jQuery實現(xiàn)頁面頂部顯示的進度條效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)頁面頂部顯示的進度條效果,以完整實例形式分析了jQuery基于animate與setTimeout定時觸發(fā)實現(xiàn)進度條漸進顯示功能,非常簡單實用,需要的朋友可以參考下2015-12-12
IE下支持文本框和密碼框placeholder效果的JQuery插件分享
這篇文章主要介紹了IE下支持文本框和密碼框placeholder效果的JQuery插件分享,本文給出插件源碼和使用示例,需要的朋友可以參考下2015-01-01
這篇文章介紹了jquery批量控制form禁用的代碼，有需要的朋友可以參考一下2013-08-08
JQuyer $.post 與 $.ajax 訪問WCF ajax service 時的問題需要注意的地方
我注意到，當在jquery中使用$.post()后，默認的contentType是application/x-www-form-urlencoded 形式進行了urlencoded - 當我的asp.net MVC代碼需要的contentType=application/json2011-09-09