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 ui 1.7更新小结
Aug 15 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
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
东方红 - 来复式再生机的修复
2021/03/02 无线电
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
javascript cookie操作类的实现代码小结附使用方法
2010/06/02 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
js实现简单计算器
2015/11/22 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
如何利用@angular/cli V6.0直接开发PWA应用详解
2018/05/06 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python中操作mysql的pymysql模块详解
2016/09/13 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
如何利用python进行时间序列分析
2020/08/04 Python
LINUX下线程,GDI类的解释
2016/12/14 面试题
学生宿舍管理制度
2014/01/30 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
委托培训协议书
2014/11/17 职场文书
二手车转让协议书
2015/01/29 职场文书
预备党员表决心的话
2015/09/22 职场文书
python实现的人脸识别打卡系统
2021/05/08 Python