aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAh0AAAFkCAYAAACEpYlzAAAfj0lEQVR4nO3dC5BddZ0n8F93pxOQCOkk6GiIJCSdciKuEwtEQJnBGMdA7YhVPMRH2HKcRFdrCM6qq4R1ZwgzpRRjMuWAyTK7BmcWA7qjZExmBRZ1CzBALToT41Q6nQQxPiAQEhIg6XT33nPuvd23b9/udDq3/93pfD7U4b7OPed/OtX9/97/6zZs2LChOwAARljjaBcAADg5CB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkMSHVibq7u1OdCgA4Dg0NDSNy3BEPHbXCRvk5QQQARl85ZJRvK+vnegaQEQsd1YEie1zeKh8DAKMrCxaVwaPycbmurkf4GJHQURkmsvtdXV35/ex2oOAhgABAOtUho/J+Y2NxyGd2Wxk+jjd41D10VIaHcsjIbmvdrxU4hA8AGDmVwaFW2Mi2rJ4uB4/KEHK8waOuoaMyRFSHjM7OznyrDh26WQBgdFR2pVSGjqampnzL6ufscfk22+d4gkfdQketFo5y0OgJHNEYh6e1xtNHJsevD3bFwcOdceBQZ72KAAAco8mTmuK0iU3x+tMaY8aEF2PSczsK9XhHXpeXw0e2lR9nhhs86t69Uh04jhw5km8d01vj0X2T44xDzTGxqZCUoqOw98hMyQEAhiqrkxviUCES/PyVM+LFpjfHhWe8GBP2bO/ToFAOHuWuluGoS+ioHhha7k7Jw0Zhe/bMBbF9f0Oc2twY2589WI9TAgB1cODQkXx75sVD+eOzp54am188PeYV6u4z9/ykZ79yF0y5lWM4rR11XZG0PF6jMnQ8/9q3xi9fnhD7XjkSv9j7cj1PBwDU2VPPvxz7C3X20y83xfOvWZDX5ZX1e3lG6nDULXSUWzsqB40emT43fr434pkDh+Klw8ZuAMCJIKuznz3QET8r1OFHpp2TB4/yZJDMcCeAHHfoqDVjJQ8d0RCP7Ht1TJrQGAcNFgWAE0rW5fKq5sZ4dP8Z+USQrG6vrOszxxo+6trSUTlF9si0OXH6KRN0qQDACWrX8y/H5EJd3jF1dp+uleG2dNR9IGm5ULs7Xx0Tm3yJLQCk0PKq5rhwVktcMGtKTJ88Mc44pVjFZ2Mqnz1wODbv2hs/3vVC7H2p45iOm/VY/Krr1XF2xZiO8todxzqQtO7rdJRbPHYf6CpNiwUARsrrTp8US952Vlw0uyVqZYCs12HmlFPirWedHh+/+Ox4ZOfeuOuxX8av9x8a0vH3HuyIfQ3d8YY6fHVJ3Vo6qrcXCskKABg575o3LT75zlnR3DS0FocslFx8Tkucf/YZ8bc/eioeanvuqO/ZV6rPu6N/XT9qLR15gSoS0CtHhj+lBgAY3Pve/Nr46IUzh7XMZjb8YfkfzI7JkybEhi2/HXTflzuKk0G6Jxz/F7TWfdCF71IBgJH1zjlThx04yrJGio9dNDPecc7UIe1fj/q9rqFD2IAT1amx5Krz4o7zTx3tggBHMe20ifGpS86uyxeJZMfIjpUNQh2q46nr6/7dK8D4MPv8c2P1glMGfH3zg0/ELe2lB3PmxH0LW47p+H3eDwzZkrfNiFObm/q/sPfXcf29u2Pn1Blxx5WvixlVL+9+8mfxicdfjksXnRc3zO59/lUTm/Jjrv7BrpEsdq7uoUNrB4wjO9vjj+7fW/Vk1irypphZ+VR7YT8BAkbcayZPjN+fO0B3SMvrYvWilwq/s7vjy0+29P3QUAgkXy4EjuzDRGXgKLu0dVr8wxO/ij0HDg96/uOt47V0wEmuz6eeljfFfQuKn4i+nD2ePSfuW1r7fZsTlQ/o9fbZLdE42IyRwu/sjXOeiFse3x2bF8yJC/InX4lvPbg7dmYtkgO0XmbHfPusKfFPW54ZiWL3EDrgJPfQ/U/EQ6XWiwt3FZtfM7PPj6G3dABJZGttHM0FC+fEpe3tccuDe/Nuz91Ptsddz7fEjVcO3gX61rPOEDqAUXTUlo5iADnK37KBlfugh/l2ONn8zumThrBXS9xw1YzYdW97fGVq4TYfx/GmUqvHwF43pGMfH6ED6CPr8/3g81vif2YPjtrS8XLcde8TcddAB8sHtLXEo9/aUvikNXJlhpPF1FdNHNqOLa+Lz57/fHzi8d0DjuPod+zThj6DZbh8OQrQY8aCN8Vnoz2fVbLz8S01AkemGDRqzjzJ+owXDdzskf3xMy0XUnglHm0vdpXuzMZ3jHJpyrR0wEmvt4ukOKXulLhx6dGbYnN9WkJa4saFLbH5wUGmsTxf+CO4cE4sadfyAcPx3EuHY8YZA09lL9v8YOF3LGbEHUtPiXvW9o7vGPTYB0f++9KEDjjJXbpoTsSDP4tvLXxTXJg/szduWftE1V6FQLF0Rjw9SDdJdpwLdg4+dXZne3t8eeq5sfrKOfF04Q/hQ/W5BDhp/Hb/oaOHjp3F1spLFxXX6rhhUUs8dH97XD918LV3fjPEL4A7HrpX4CT30P21g0TWFTJYV0kfc+bEDbP3xldqdsf0tfPx9vjW3pb8DyFwbDY/9cLgO2SDs7Pfw/x3svRcPo22/Lt3HMeuA6EDqOHUeOesU2Lzjsq/UKfElVeeF/ctLW9z4tL8+d5ulaG1XLwcdz3469hd+kMIDN1jT+2Lzq6BFugqrcdR+p2slE+jLf/u1XhndszHEoQO3StAf3NeX5wGu/DcWLK33BJS+INWo3tl9vkzBu5WaTml31LMuedLKyaeUzhJ+9FbR4Ci5w4ejn/++bNx+ZteU/VK7+9n3tXZ750tpW6W3fGJB0/pN75j49ZnYu9LxnQAyZVbLp6IW2JO3HfleXHhk7+OXw6wdz7LpeJxv+9s2dles/um+n3A0Nxb+H1817xpVd+/UmyJvHKwNw6w7s5LhzvjWz/5TZ1LWVvDhg0bjmsh9Wwd9q6urujs7IyOjo44fPhwvn238y31KiMwgnqXQc8+KbVHLOy7MumgC4DVXMcDGGkLzjo9vri4dfAl0Ycg61b5r5va4qe79x913/c1/TQmTpyYb83NzdHU1BSNjY3RcAxlEDoA4AT0vje/Nj564cxhf8V99t1tdz76dGzY8tuhna8OoUP3CgCcgL77r7+NZw4cjhsunR2nTDi2eSGvdHTFXz+0I368a+QHj1YSOgDgBPXozr3xs1+/GO//d78T//7Nr4mJTYOHj8NHumLDlmfif/3Lb+LFV44kKmUvoQMATmD7C+Fh3WO/jPu2/DYunNUSF8yakn9527TTit/Tks14+dX+Q7F51968ZSPFLJWBCB0AMA5kYSKb+pptY5XFwQCAJIQOACAJoQMASELoAACSEDoAgCRGdPZK9k2UAMCJ7Y/WPlGX42jpAACSEDoAgCSEDgAgCaEDAEhC6AAAkhA6AIAkhA4AIAmhAwBIQugAAJIQOgCAJIQOACAJoQMASELoAACSGEOhY3usvrghlm2q/fzFq7cf9xk2LRvmcbavjosblkW/ovXfMS9rQ7+L2BTLGmpd29COd+zvGwljqSwAnIjGUOiobfvq62L5IxGPLG+NhkLF3bP1qf1KlX3l6xevjuOPKcMp69LYuGbxUHYeQpCZG5dffVGsvWzwyj4LU32uPd+WxerVF9d4vnc7agDbtGzgfQqv9Q9XADCwMRE6ipVmax4usgq2oVwZFyq21q0roru7u3fbuLTwwkWx6jP9K/aLVrVV7DN02weqnMuVatvWeOToB4nrlkesalsTi2OQVpU8bBSOfV3Euu7PROv2iudqbK3Li2cu/lyqt4sjO8XiNcWfTduqi7IfQrTlP6s1cXn2xqUb+/788q0tsl0r/gXylpjKwJJf+eI1sWJra//ryMp72Zaa/wYAMJAxETqKlWaxIly6sVhhLs4qtpXzo62y1SD7dH1ZxMbuh+P6uUM4cFVlftna6haTYqU99/qHi5Vx26pCnFlaOH6pPFsuK+6XvTHWxmU1WhPK4aih9Z64uq23XIvXtMXV97T2aaHIg0MeNgrHf/j6aFvWGq23lncon3eo28Y4pmh11JaVQpBrK/8MehWv49Y+79t0a99rBYChGBOho7/CJ+/W5fHII8ujtbKSr678j9a8P/f6eLjq030x1JS3wSrOuXH9w5WtK1WhoKI1Zfu2LYX/PxLLWysDSbnlpreiz89dCBuVp7xofmvVpS/rDTM9JxjqmJI66gls2XVkP/PelqjL1vZeqx4WAIZqjIaOxbEm/yRf+vRdruR7ug5KXQlVelox8nBSZxfNj9YBnutpKamxta3aEitXR8zvV9ztkWWVc+fNLYWjYrdM1qVRuPQ8WA0+5iL7GY1ga0NlYMtaP5auKoa2pUv7BLehDF8BgMzYCx3fWTbsQaDDHdNxNMWWjEH36D+QtbRdF+vi4esX9wwI7dMSEqui5rCILHh09++eGfDspTEprcURt8XWocLPsG04F1vrurIuoTWXF5+6Yk1c8Z3RGagLwIltzISOTctKzfdxRb8uiOH63rJa3R3HPsulbesjWZNEnzLVCiJ9u266ozL71GwNqbrOvoNPi907eUvCUQaylo/dZyBp4dh9WmayY9RqrRnAtjzI5ANQ+pUzH4OzLuK6ocyAAYCSMRE6ssr2O1eUxlxcMfz2+urulcvXVFTwpQGSPa0hA1T8/RW7QY6nXLXX6ah+bnu0fqY7ny3Sb0xH5hgCQy1Hb63pa14eZErdN/k4k9bYuqKiO6XU/fKw0aQADNGYCB3ZJ+c+YwPySu6yWFs5OLM49aRnYGlrsdmiT0tFT0tDje6V7d+7Jx5ZuqrfTIzaKhb52nRrvvbGUDJHdStK7aEl5empK2N+W+V1z425c0utCG3zY2VF8DjWwFBL3lqT/fyGOPLzO5WtRKULqTlt10hSAIZoTISOfvIxDbXWlagxrTRvqWiLrYMupLEpbi2ElKVXXB+XX70lLqtZUZZmzOSzY0rdCmtaY/XKtXHRqs9EzcxR1eUyWPdKplhpfyeuqJo502+dkJ5yNPQfq3GsC3wVTxAr114US5eWR7MWu24Ga6W4omIac9+1PqpmARlJCsAQjc3Q0UfW6tAay8/dWGwBqDUGY/u22BIDtUZk778s1hYqzqx+nHv9unz9jcrcUVycrNjyUDmVNh9nEqtiXY3Kua1GyjlaS0fPGiSV5y0UZLDZL8XgMvAaHv2CQ084uTi+d/nDxeB0XSHELF0Rn5lf9ZPJwk7PD6LUqpQHnnIBvxdbz72ookWp999C1gDgWI3p0FFeqfSeq9uKn6izcQSlAYyVoaHYdXJFjdaIrCujGBx6FxnLPuXnc1J7WgmKi5NVTj8tdq9ctrZQ2dcc81Ec51G9xsbRWjpq6bdOR88piutkZGVYtWpLT6tHrZaN8jLoWYtIbxmy6ymFhD7X36tvcKqYntwzfff6WLPm4eJ4mDzMFAfjxtqVYfwoAMdqTISO3mXQi60V5Up05fy2/p/mSwMY82mb+ZiC1VHIHMUlufOxIMUxCBedu7UQTootHP0Hi2ZrXBSnpPYfk1DRslLdKtFnJszSWHFcgygr1umofLbc1dK6PM4ttYxc39MSUipz1aybxRUDZnuyRR5aStdx1OBUveZH1RTg8iqqPVue/CwOBsAxadiwYUP38Rwgq4S6urqis7MzOjo64vDhw/n23c63xH1Lz6tXOce4YlApzu7IWleyQbCZrPWgWJlnYaL8PSq9sm6TNVF4Q09XTDa7ZigzQsrHy1o2qhsxiq9Fz7krXoiLK7tPSufXUwLAYP5o7RPxvqafxsSJE/Otubk5mpqaorGxMf8AOlRCBwAwqHqFjjHRvQIAjH9CBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkITQAQAkIXQAAEkIHQBAEkIHAJCE0AEAJCF0AABJCB0AQBJCBwCQhNABACQhdAAASQgdAEASQgcAkMSEkTx4e3v7SB4eADiBaOkAAJIQOgCAJIQOACAJoQMASELoAACSGNHZK0A6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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. Openssl rsautl命令
			
    一.简介 rsautl指令能够使用RSA算法签名,验证身份,加密/解密数据 二.语法 openssl rsautl [-in file] [-out file] [-inkey file] [-pas ...
    
			
    2. 
						
  2. SQl语句收藏
			
    /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限验证登录MySQL */ mysq ...
    
			
    3. 
						
  3. CVPR，ICCV和ECCV，计算机视觉三大顶级盛会
			
    简介:https://blog.csdn.net/hualitlc/article/details/11099693 近几年ICCV,CVPR,和ECCV论文列表:https://www.xuebuy ...
    
			
    4. 
						
  4. scalaWindows和Linux搭建
			
    Windows搭建 https://www.cnblogs.com/freeweb/p/5623372.html Linux搭建 https://www.cnblogs.com/freeweb/p/5 ...
    
			
    5. 
						
  5. 洛谷P4172 [WC2006]水管局长（lct求动态最小生成树）
			
    SC省MY市有着庞大的地下水管网络,嘟嘟是MY市的水管局长(就是管水管的啦),嘟嘟作为水管局长的工作就是:每天供水公司可能要将一定量的水从x处送往y处,嘟嘟需要为供水公司找到一条从A至B的水管的路径, ...
    
			
    6. 
						
  6. ArcGIS应用——使用Python为图斑连续编号及扩展应用
			
    为图斑连续编号 在GIS应用中,为图斑连续编号(编号递增)是一项常见的需求,利用ArcGIS,可以方便的实现. Python脚本如下: rec=0 def autoIncrement(): globa ...
    
			
    7. 
						
  7. simrank
			
    simrank 背景 度量相似度是许多应用的关键问题.传统方法与问题的领域相关,如文本匹配.计算交集.simrank则利用关联关系度量相似性,即"两个节点的相似性和各自邻域节点的相似度有关& ...
    
			
    8. 
						
  8. 实战iOS7之NSURLSession
			
    NSURLSession VS NSURLConnection NSURLSession可以看做是NSURLConnection的进化版,其对NSURLConnection的改进点有: * 根据每个S ...
    
			
    9. 
						
  9. docker中安装Jenkins
			
    1.获取Jenkins镜像(不要直接docker pull jenkin,这样获取的不是最新的版本,后续安装部分插件会不成功) docker pull jenkins/jenkins 创建文件夹 su ...
    
			
    10. 
						
  10. C#面向对象：多态
			
    此文章转载网站:https://www.cnblogs.com/qixinbo/p/8244583.html 多态: 有多态之前必须要有继承,只有多个类同时继承了同一个类,才有多态这样的说法. 在继承 ...
    
			
    11.