最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 20:59:58
文档

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

基于JQuery的消息提示框效果代码_jquery:详细内容请下载附件 附件下载 先看一下效果: 内容都集合到一个1.58KB的js文件里 代码如下: var returnurl = ''; var messagebox_timer; $.fn.messagebox = function (message, url, type, delay) { clearTimeout
推荐度:
导读基于JQuery的消息提示框效果代码_jquery:详细内容请下载附件 附件下载 先看一下效果: 内容都集合到一个1.58KB的js文件里 代码如下: var returnurl = ''; var messagebox_timer; $.fn.messagebox = function (message, url, type, delay) { clearTimeout


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

成功提示错误提示警告信息

内容都集合到一个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 = "" + message + ""; 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文件:
代码如下:



页面代码:
代码如下:


  • 成功提示', 'http://localhost:5083/', 1, 20000);">成功,20秒后跳转

  • 错误提示', '', 0, 1000);">失败,1秒消失

  • 这是警告', 'back', 2);">警告,默认时间5秒后后退

  • 文档

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

    基于JQuery的消息提示框效果代码_jquery:详细内容请下载附件 附件下载 先看一下效果: 内容都集合到一个1.58KB的js文件里 代码如下: var returnurl = ''; var messagebox_timer; $.fn.messagebox = function (message, url, type, delay) { clearTimeout
    推荐度:
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top