javascrpt自定义弹出提示框,仅具备提示功能

/**
 *自定义弹出提示框,仅具备提示功能
 *需依赖jquery
 *$("body").messagebox(str, 'back', 2);【$("parent").find("body").messagebox(str,'')】
 *$("body").messagebox(str, '', 0, 1000);
 *$(window.parent.document).find("body").messagebox(str, '', 1, 1000);
 * 如果页面中有嵌套的iframe,要在最顶端显示提示框,可以吧$("body")替换为$("parent")或者$("top")
 */

/**
 * @param {Object} message 提示内容(显示内容)
 * @param {Object} url 跳转地址 在延迟延迟结束后进行跳转  如果为bakc 则在延迟延迟结束后进行后退操作,无操作的话为' '即可
 * @param {Object} type 提示框类型 1为成功,0为错误,其余为警告
 * @param {Object} delay 隐藏延迟(显示时间)
 * @memberOf {TypeName}
 */
var returnurl = '';
var messagebox_timer;
$.fn.messagebox = function(message, url, type, delay) {
 clearTimeout(messagebox_timer);
 $("#msgprint").remove();
 var m_body = $(this);
 $(this).find("#msgprint").remove();
 delay = (typeof delay == "undefined" ? 5000 : delay);
 returnurl = url;
 var box_style = 'position:absolute;display:none;z-index:9000;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 = $(this).find("#msgprint");
 var ext_width = dom_obj.width();
 var top = m_body.height();
 var left = m_body.width();
 top = ((top - dom_obj.height()) / 2) + "px";
 left = ((left - dom_obj.width()) / 2) + "px";
 dom_obj.css( {
  'top' : top,
  'left' : left
 });
 dom_obj.fadeIn(1000, function() {
  messagebox_timer = setTimeout(function() {
   if (returnurl == undefined || returnurl == '') {
    m_body.find("#msgprint").fadeOut(1000)
   } else {
    if (returnurl == "back") {
     this.history.back(-1)
    } else {
     this.location.href = returnurl
    }
   }
  }, delay)
 });
};
//返回当前页面高度
function pageHeight() {
 if ($.browser.msie) {
  return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight
    : document.body.clientHeight;
 } else {
  return self.innerHeight;
 }
};
//返回当前页面宽度
function pageWidth() {
 if ($.browser.msie) {
  return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth
    : document.body.clientWidth;
 } else {
  return self.innerWidth;
 }
};

将以上js代码保存为一个js文件,然后引入到页面中,然后引用其中函数即可,如:

$(window.parent.document).find("body").messagebox('恭喜,删除成功', '', 1, 1000);

posted @ 2013-04-07 18:51  Handy~~💪  阅读(175)  评论(0编辑  收藏  举报