zoukankan      html  css  js  c++  java
  • 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);

  • 相关阅读:
    面向 例题
    面向
    mysql 储存过程
    php数组
    PHP 函数
    python 三大器
    python 第十一章 函数名+格式化+迭代器+递归
    python 第十章 动态参数+名称空间+嵌套+修改值
    python 第八章 r w a 等文件操作
    python 第七章 数据类型补充+遇到的坑+二次编码
  • 原文地址:https://www.cnblogs.com/yjtx/p/4429634.html
Copyright © 2011-2022 走看看