编程 Javascript

基于JQuery 的消息提示框效果代码

Posted in Javascript onJuly 31, 2011

详细内容请下载附件附件下载
先看一下效果：

基于JQuery 的消息提示框效果代码

内容都集合到一个1.58KB的js文件里

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 的消息提示框效果代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于Jquery的表格隔行换色，移动换色，点击换色插件

Dec 22 Javascript

基于jquery & json的省市区联动代码

Jun 26 Javascript

ie与ff下的event事件使用介绍

Nov 25 Javascript

jquery 按键盘上的enter事件

May 11 Javascript

JavaScript设计模式之外观模式介绍

Dec 28 Javascript

JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt

Nov 17 Javascript

js弹出框、对话框、提示框、弹窗实现方法总结(推荐)

May 31 Javascript

Jquery遍历select option和添加移除option的实现方法

Aug 26 Javascript

vue.js使用代理和使用Nginx来解决跨域的问题

Feb 03 Javascript

JS实现水平遍历和嵌套递归操作示例

Aug 15 Javascript

Vue 实现从小到大的横向滑动效果详解

Oct 16 Javascript

node脚手架搭建服务器实现token验证的方法

Jan 20 Javascript

使用基于jquery的gamequery插件做JS乒乓球游戏

Jul 31 #Javascript

JQuery通过Ajax提交表单并返回结果

Jul 31 #Javascript

Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api

Jul 31 #Javascript

动态加载外部javascript文件的函数代码分享

Jul 28 #Javascript

工作需要写的一个js拖拽组件

Jul 28 #Javascript

基于Jquery的开发个代阴影的对话框效果代码

Jul 28 #Javascript

jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法

Jul 28 #Javascript