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组件
												


											
JavaScript实现自定义alert弹框的更多相关文章
	

    
								
  1. 自定义alert弹框，title不显示域名
		
    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...
    
		
    2. 
						
  2. 自定义alert弹框，title不显示域名(重写alert)
		
    问题: 系统默认的alert弹框的title会默认显示网页域名 解决办法: (修改弹框样式) (function() { window.alert = function(name) { $(" ...
    
		
    3. 
						
  3. 自定义alert弹框
		
    /**************** UIAlertControllerStyleAlert *************************/ /*创建一个 可以自定义文字颜色和字体大小的IAler ...
    
		
    4. 
						
  4. [转]自定义alert弹框，title不显示域名
		
    //(仅去掉网址) (function(){ window.alert = function(name){ var iframe = document.createElement("IFRA ...
    
		
    5. 
						
  5. 操作JavaScript的Alert弹框
		
    @Testpublic void testHandleAlert(){ WebElement button =driver.findElement(By.xpath("input" ...
    
		
    6. 
						
  6. CodePush自定义更新弹框及下载进度条
		
    CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装 ...
    
		
    7. 
						
  7. selenium对Alert弹框的多种处理
		
    Alert弹框是一个很烦人的控件,因为当前页面如果弹出了该弹框,你必须要处理它,不然你就不能操作页面的其它元素,下面我列出了alert弹框在多种场景下的处理办法. 明确知道系统哪个地方会弹alert  ...
    
		
    8. 
						
  8. python工具 - alert弹框输出姓名年龄、求和
		
    使用python自带的tkinter库进行GUI编程,完成两个功能: (1)要求用户输入姓名和年龄然后打印出来 (2)要求用户输入一个数字,然后计算1到该数字之间的和 代码部分: # 导入tkinte ...
    
		
    9. 
						
  9. 仿写confirm和alert弹框
		
    在工作中,我们常常会遇到原生的样式感觉比较丑,又和我们做的项目风格不搭.于是就有了仿写原生一些组件的念头,今天我就带大家仿写一下confirm和alert样式都可以自己修改. 有些的不好的地方请指出来 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JVM内存区域解析
			
    引言 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途,以及创建和销毁的时间.有的区域随着虚拟机进程的启动而存在,有些区域则是依赖用户线程的 ...
    
			
    2. 
						
  2. ECC 算法
			
    一.简介 1)椭圆曲线密码学的初级读本 http://8btc.com/thread-1240-1-1.html 2)ECC加密算法入门介绍 http://www.pediy.com/kssd/ped ...
    
			
    3. 
						
  3. Oracle Nested table、Record
			
    1.如何在PL/SQL中创建和使用Nested table;2.如何在PL/SQL中创建和使用Record; 1.如何在PL/SQL中创建和使用Nested table DECLARE /**创建一个 ...
    
			
    4. 
						
  4. git 进阶操作
			
    1.blame git blame +文件名,可以查看到某个文件每一行最近一次是由谁编辑修改的.-L 22,33 选项可以制定 2.bisect 开始git bisect:   $ git bisec ...
    
			
    5. 
						
  5. UVa 3211 Now or later (二分+2-Sat)
			
    题意:有 n 架飞机,每个飞机早着陆,或者晚着陆,让你安排一个方式,让他们着陆的时间间隔尽量大. 析:首先对于时间间隔,可以用二分来解决,然后就成了一个判定性问题,然后怎么判断该时间间隔是不是成立呢, ...
    
			
    6. 
						
  6. 网络编程释疑之：单台服务器上的并发TCP连接数可以有多少
			
    曾几何时我们还在寻求网络编程中C10K问题的解决方案,但是现在从硬件和操作系统支持来看单台服务器支持上万并发连接已经没有多少挑战性了.我们先假设单台服务器最多只能支持万级并发连接,其实对绝大多数应用来 ...
    
			
    7. 
						
  7. Ubuntu建立WIFI热点
			
    网络共享 http://www.linuxidc.com/Linux/2014-07/104624.htm
    
			
    8. 
						
  8. critical section的用法
			
    critical section Critical Section: 不论是硬件临界资源,还是软件临界资源,多个进程必须互斥地对它进行访问.每个进程中访问临界资源的那段代码称为临界区(Critical ...
    
			
    9. 
						
  9. Gym 100989L (DFS)
			
    AbdelKader enjoys math. He feels very frustrated whenever he sees an incorrect equation and so he tr ...
    
			
    10. 
						
  10. 《html5 从入门到精通》读书笔记（二）
			
    接着上面继续记录笔记,这次要记的知识点比较多...记录下我认为比较重要的东西. 一.表单属性 1.autocomplete属性 该属性规定form或input域应该拥有自动完成功能. <form ...
    
			
    11.