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下利用arguments实现string.format函数
Aug 24 Javascript
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
Nov 11 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
聊天室php&amp;mysql(二)
2006/10/09 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
JavaScript设计模式初探
2016/01/07 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
Python运算符重载用法实例分析
2015/06/01 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
django 取消csrf限制的实例
2020/03/13 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
Zavvi荷兰:英国大型音像制品和图书游戏零售商
2018/03/22 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
写字楼租赁意向书
2014/07/30 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
领导班子整改措施
2014/10/24 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
奖学金个人总结
2015/03/04 职场文书
地道战观后感
2015/06/04 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android