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 相关文章推荐
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
jquery取子节点及当前节点属性值的方法
Sep 09 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
Javascript实现倒计时时差效果
May 18 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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学习之PHP运算符
2006/10/09 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
jQuery实现渐变下拉菜单的简单方法
2015/03/11 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
js实现tab切换效果
2017/02/16 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
vue axios请求拦截实例代码
2018/03/29 Javascript
新手简单了解vue
2019/05/29 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
在Layui中操作数据表格,给指定单元格添加事件示例
2019/10/26 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
TensorFlow变量管理详解
2018/03/10 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
Python中常用的内置方法
2019/01/28 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Python3 io文本及原始流I/O工具用法详解
2020/03/23 Python
python 星号(*)的多种用途
2020/09/21 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
世嘉游戏英国官方商店:SEGA Shop UK
2019/09/20 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
毕业自荐书
2013/12/09 职场文书
搞笑的获奖感言
2014/08/16 职场文书
2014年实习期工作总结
2014/11/27 职场文书