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 相关文章推荐
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
javascript每日必学之继承
Feb 23 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 jQuery
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 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数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[01:06]DOTA2隆重推出2016冬季勇士令状 内含上海特级锦标赛互动指南
2016/02/17 DOTA
python基础教程之面向对象的一些概念
2014/08/29 Python
Python处理文本换行符实例代码
2018/02/03 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
python 使用多线程创建一个Buffer缓存器的实现思路
2020/07/02 Python
python实现自动清理重复文件
2020/08/24 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
python计算auc的方法
2020/09/09 Python
Python字节单位转换(将字节转换为K M G T)
2021/03/02 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
法国房车租赁网站:Yescapa
2019/08/26 全球购物
关于VPN
2012/06/10 面试题
新闻工作者先进事迹
2014/05/26 职场文书
2015年班级工作总结范文
2015/04/03 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
党支部审查意见
2015/06/02 职场文书
计算机实训心得体会
2016/01/14 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript