JavaScript实现自定义alert弹框

aaarticlea/png;base64,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kITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkMSEkTx4e3v7SB4eADiBaOkAAJIQOgCAJIQOACAJoQMASELoAACSGNHZK0A6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" alt="" width="440" height="289" />

一、自定义alert弹框知识点总结

• 利用requireJS实现模块化管理；

• 组合使用构造函数和原型模式实现弹框对象的创建；

• 巧妙利用命名空间实现换肤功能；

• 依赖jquery实现DOM操作；

• 依赖$.extend()方法实现对象的扩展，即实现默认参数和用户传入参数；

• 依赖jqueryUI实现弹框的拖动；

• 自定义事件的实现原理。

二、HTML代码(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义alert弹框</title>
    <link rel="stylesheet" href="style/window_alertBox.css"/>
    <script data-main="js/main.js" src="http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js"></script>
</head>
<body>
    <button id="btn">弹框</button>
</body>
</html>

三、入口文件代码(main.js)

// 配置路径及别名
require.config({
    baseUrl:'js',
    paths:{
        jquery   : 'jquery-1.9.1',
        jqueryUI : 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
    }
})
// 初始化window弹框
require(['jquery','window'],function($,w){
    $('#btn').on('click',function(){
        var win = new w.Window();
        win.alert({
            title           : '提示',
            content         : '换肤功能实现喽',
            btnText         : '确定按钮',
            width           : 500,
            height          : 300,
            skinClassName   : 'window_skin_a',
            hasMask         : true,
            dragHandel      : '.window_header',
            handlerSureBtn  : function(){
                alert('我是点击确定按钮后的回调...');
            },
            hasCloseBtn     : true,
            handlerCloseBtn : function(){
                alert('我是点击关闭按钮后的回调...');
            }
        });
        win.on('alert',function(){ alert('点击确定按钮事件01') });
        win.on('alert',function(){ alert('点击确定按钮事件02') });
        win.on('close',function(){ alert('点击关闭按钮事件01') });
        win.on('close',function(){ alert('点击关闭按钮事件02') });
    })
})

四、弹框模块实现(window.js)

define(['jquery','jqueryUI'],function($,$UI){
    var Window = function(){
        this.config = {
            title           : '系统消息',        // 弹框的标题文字
            content         : '内容',           // 弹框的内容问题
            btnText         : '确定',           // 弹框的按钮文字
            width           : 800,             // 弹框的宽度
            height          : 500,             // 弹框的高度
            handlerSureBtn  : null,            // 弹框的按钮触发的事件
            hasCloseBtn     : false,           // 弹框中是否显示关闭按钮
            handlerCloseBtn : null,            // 弹框关闭按钮触发的事件
            skinClassName   : null,            // 弹框换肤
            hasMask         : true,            // 弹框遮罩
            isDraggable     : true,            // 弹框是否可拖动
            dragHandel      : null             // 弹框中拖动的'把手'：'.window_title'
        };
        this.handlers = {};                    // 弹框中的自定义事件集合
    };
    Window.prototype = {
        // 自定义事件
        on : function(type, handler){
            if( typeof this.handlers[type] == "undefined" ){
                this.handlers[type] = [];
            }
            this.handlers[type].push(handler);
        },

        fire : function(type, data){
            if( this.handlers[type] instanceof Array ){
                var handlers = this.handlers[type];
                for( var i = 0; i < handlers.length; i++ ){
                    handlers[i](data);
                }
            }
        },
        // 弹框事件
        alert : function(cfg){
                var that = this;
                var config = $.extend(this.config, cfg);

                // 弹框盒子
                var boundingBox = $('<div class="window_boundingBox">' +
                                    '<div class="window_header">' + config.title + '</div>' +
                                    '<div class="window_body">' + config.content + '</div>' +
                                    '<div class="window_footer">' +
                                    '<input type="button" id="btn_sure" value=' + config.btnText + '>' + '</div>' +
                                    '</div>');

                boundingBox.appendTo('body');

                // 定制皮肤
                if(config.skinClassName){
                    boundingBox.addClass(config.skinClassName);
                }

                //模态弹窗
                if(config.hasMask){
                    var mask = $('<div class="window_mask"></div>');
                    mask.appendTo('body');
                }

                //拖动属性
                if(config.isDraggable){
                    if(config.dragHandel){
                        boundingBox.draggable({handle:config.dragHandel});
                    }else{
                        boundingBox.draggable();
                    }
                }

                // 设置宽、高、坐标
                boundingBox.css({
                    width: config.width,
                    height: config.height,
                    left: (config.x || (window.innerWidth - config.width)/2) + 'px',
                    top: (config.y || (window.innerHeight - config.height)/2) + 'px'
                })

                // 关闭按钮
                if(config.hasCloseBtn){
                    var closeBtn = $('<div class="closeBtn">X</div>');
                    boundingBox.append(closeBtn);
                    $('.closeBtn').on('click',function(){
                        // config.handlerCloseBtn && handlerCloseBtn();
                        that.fire('close');
                        boundingBox.remove();
                        mask && mask.remove();
                    })
                }

                // 确定按钮点击事件
                $('#btn_sure').on('click',function(){
                    // config.handlerSureBtn && config.handlerSureBtn();
                    that.fire('alert');
                    boundingBox.remove();
                    mask && mask.remove();
                })

                // 为关闭按钮添加'close'事件
                if( config.handlerCloseBtn ){
                    this.on('close',config.handlerCloseBtn);
                }                

                // 为确定按钮添加'alert'事件
                if( config.handlerSureBtn ){
                    this.on('alert',config.handlerSureBtn);
                }
        }
    }
    return {
        Window : Window
    }
})

五、CSS样式(window_alertBox.css)

*{
    margin:; padding:;
}
html,body{
    width: 100%; height: 100%;
}
body{
    font: 14/1.5 normal 'Microsoft YaHei';  background-color: #fff;
}

/*默认样式*/
.window_boundingBox{
    background-color: #fff; width: 600px; height: 360px; border: 1px solid #4d99cb; border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3); position: fixed; overflow: hidden; z-index:;
}
.window_header{
    color: #fff; width: 100%; background-color: #4d99cb; height: 36px; line-height: 36px; text-align: center;
}
.window_body{
    padding: 10px;
}
.window_footer{
    background-color: #dcdcdc; width: 100%; height: 36px; line-height: 36px; text-align: center;
    position: absolute;  bottom:;
}
.closeBtn{
    border-radius: 50%; cursor: pointer; width: 20px; height: 20px; padding: 2px; text-align: center;
    line-height: 20px; background-color: #fff; color: #333; position: absolute; right: 6px; top: 6px; color: #4d99cb;
}
.window_mask{
    background-color: #000; opacity: 0.3; width: 100%; height: 100%; position: fixed; left:; top:; z-index:;
}

/*定制皮肤*/
.window_skin_a.window_boundingBox{
    border: 1px solid red;
}
.window_skin_a .window_header{
    background-color:red;
}
.window_skin_a .closeBtn{
    color: red;
}

参考：慕课网 / 阿当大话西游之WEB组件