javascript重写alert方法的实例代码


Posted in Javascript onMarch 29, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>重写alert</title>
    <link  href="css/style.css" rel="stylesheet"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript">
    var showAlert = function(msg){
        jAlert(msg, "提示!");
    }
    window.alert=showAlert;
    $.alerts={
        verticalOffset:-75,horizontalOffset:0,repositionOnResize:true,overlayOpacity:.01,overlayColor:'#FFF',draggable:true,okButton:' OK ',cancelButton:' Cancel ',dialogClass:null,alert:function(message,title,callback){
            if(title==null)title='Alert';
            $.alerts._show(title,message,null,'alert',function(result){
                if(callback)callback(result)
            })
        }
        ,_show:function(title,msg,value,type,callback){
            $.alerts._hide();
            $.alerts._overlay('show');
            $("BODY").append('<div id="popup_container">'+'<h1 id="popup_title"></h1>'+'<div id="popup_content">'+'<div id="popup_message"></div>'+'</div>'+'</div>');
            if($.alerts.dialogClass)$("#popup_container").addClass($.alerts.dialogClass);
            var pos=($.browser.msie&&parseInt($.browser.version)<=6)?'absolute':'fixed';
            $("#popup_container").css({
                position:pos,zIndex:99999,padding:0,margin:0
            });
            $("#popup_title").text(title);
            $("#popup_content").addClass(type);
            $("#popup_message").text(msg);
            $("#popup_message").html($("#popup_message").text().replace(/\n/g,'<br />'));
            $("#popup_container").css({
                minWidth:$("#popup_container").outerWidth(),maxWidth:$("#popup_container").outerWidth()
            });
            $.alerts._reposition();
            $.alerts._maintainPosition(true);
            switch(type){
                case'alert':$("#popup_message").after('<div id="popup_panel"><input type="button" value="'+$.alerts.okButton+'" id="popup_ok" /></div>');
                $("#popup_ok").click(function(){
                    $.alerts._hide();
                    callback(true)
                });
                $("#popup_ok").focus().keypress(function(e){
                    if(e.keyCode==13||e.keyCode==27)$("#popup_ok").trigger('click')
                });
                break
            };
            if($.alerts.draggable){
                try{
                    $("#popup_container").draggable({
                        handle:$("#popup_title")
                    });
                    $("#popup_title").css({
                        cursor:'move'
                    })
                }
                catch(e){}
            }
        }
        ,_hide:function(){
            $("#popup_container").remove();
            $.alerts._overlay('hide');
            $.alerts._maintainPosition(false)
        }
        ,_overlay:function(status){
            switch(status){
                case'show':$.alerts._overlay('hide');
                $("BODY").append('<div id="popup_overlay"></div>');
                $("#popup_overlay").css({
                    position:'absolute',zIndex:99998,top:'0px',left:'0px',width:'100%',height:$(document).height(),background:$.alerts.overlayColor,opacity:$.alerts.overlayOpacity
                });
                break;
                case'hide':$("#popup_overlay").remove();
                break
            }
        }
        ,_reposition:function(){
            var top=(($(window).height()/ 2) - ($("#popup_container").outerHeight() /2))+$.alerts.verticalOffset;
            var left=(($(window).width()/ 2) - ($("#popup_container").outerWidth() /2))+$.alerts.horizontalOffset;
            if(top<0)top=0;
            if(left<0)left=0;
            if($.browser.msie&&parseInt($.browser.version)<=6)top=top+$(window).scrollTop();
            $("#popup_container").css({
                top:top+'px',left:left+'px'
            });
            $("#popup_overlay").height($(document).height())
        }
        ,_maintainPosition:function(status){
            if($.alerts.repositionOnResize){
                switch(status){
                    case true:$(window).bind('resize',function(){
                        $.alerts._reposition()
                    });
                    break;
                    case false:$(window).unbind('resize');
                    break
                }
            }
        }
    };
    jAlert=function(message,title,callback){
        $.alerts.alert(message,title,callback)
    }
    $(function(){alert("hello word!")})
    </script>
    <style>
    #popup_container{font-family:Arial,sans-serif;font-size:12px;min-width:300px;max-width:600px;background:#FFF;border:solid 5px #999;color:#000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}#popup_title{font-size:14px;font-weight:bold;text-align:center;line-height:1.75em;color:#666;background:#CCC url(images/title.gif) top repeat-x;border:solid 1px #FFF;border-bottom:solid 1px #999;cursor:default;padding:0em;margin:0em;}#popup_content{background:16px 16px no-repeat url(images/info.gif);padding:1em 1.75em;margin:0em;}#popup_content.alert{background-image:url(images/info.gif);}#popup_message{padding-left:48px;}#popup_panel{text-align:center;margin:1em 0em 0em 1em;}#popup_prompt{margin:.5em 0em;}
    </style>
</head>
<body>
</body>
</html>
Javascript 相关文章推荐
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
实例代码讲解jquery easyui动态tab页
Nov 17 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 Javascript
javascript时间函数基础介绍
Mar 28 #Javascript
javascript数组的使用
Mar 28 #Javascript
js获取class的所有元素
Mar 28 #Javascript
js导航菜单(自写)简单大方
Mar 28 #Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 #Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 #Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 #Javascript
You might like
php header()函数使用说明
2008/07/10 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP表单数据写入MySQL数据库的代码
2016/05/31 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
jquery多浏览器捕捉回车事件代码
2010/06/22 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
node.js实现BigPipe详解
2014/12/05 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python字符串常用方法
2018/06/14 Python
python文字转语音的实例代码分析
2019/11/12 Python
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
一套比较完整的软件测试人员面试题
2012/05/13 面试题
大专毕业生自我鉴定
2013/11/21 职场文书
小组合作学习反思
2014/02/18 职场文书
春节联欢会主持词
2014/03/24 职场文书
生产文员岗位职责
2014/04/05 职场文书
上诉答辩状范文
2015/05/22 职场文书
跑出一片天观后感
2015/06/08 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书