zoukankan      html  css  js  c++  java
  • JavaScript实现自定义alert弹框

    一、自定义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({ 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: 0; padding: 0;
    }
    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: 2;
    }
    .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: 0;
    }
    .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: 0; top:0; z-index: 1;
    }
    
    /*定制皮肤*/
    .window_skin_a.window_boundingBox{
        border: 1px solid red;
    }
    .window_skin_a .window_header{
        background-color:red;
    }
    .window_skin_a .closeBtn{
        color: red;
    }

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

  • 相关阅读:
    第八章 多线程编程
    Linked List Cycle II
    Swap Nodes in Pairs
    Container With Most Water
    Best Time to Buy and Sell Stock III
    Best Time to Buy and Sell Stock II
    Linked List Cycle
    4Sum
    3Sum
    Integer to Roman
  • 原文地址:https://www.cnblogs.com/lvmylife/p/5584573.html
Copyright © 2011-2022 走看看