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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
有关json_decode乱码及NULL的问题
Oct 13 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
利用JS实现数字增长
Jul 28 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
vue添加axios,并且指定baseurl的方法
Sep 19 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
Jun 07 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 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 XML备份Mysql数据库
2009/05/27 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
JQuery中$(document)是什么意思有什么作用
2014/07/21 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python如何实现异步调用函数执行
2019/07/08 Python
python命令 -u参数用法解析
2019/10/24 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
jupyter notebook实现显示行号
2020/04/13 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
Viking比利时:购买办公用品
2019/10/30 全球购物
.net开发工程师面试题
2014/02/25 面试题
上海世博会志愿者口号
2014/06/17 职场文书
2014年信用社工作总结
2014/11/25 职场文书
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
java设计模式--七大原则详解
2021/07/21 Java/Android
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
SQL语句多表联合查询的方法示例
2022/04/18 MySQL