• 重写window.alert


    代码

    window.alert = alert;
    //重写alert
    function alert (data, callback) { //回调函数
        var alert_bg = document.createElement('div'),
        alert_box = document.createElement('div'),
            alert_text = document.createElement('div'),
            alert_btn = document.createElement('div'),
            textNode = document.createTextNode(data ? data : ''),
            btnText = document.createTextNode('确 定');
    
        // 控制样式
        css(alert_bg, {
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'right': '0',
            'bottom': '0',
            'background-color': 'rgba(0, 0, 0, 0.1)',
            'z-index': '999999999'
        });
    
        css(alert_box, {
            'width': '270px',
            'max-width': '90%',
            'font-size': '16px',
            'text-align': 'center',
            'background-color': '#fff',
            'border-radius': '15px',
            'position': 'absolute',
            'top': '50%',
            'left': '50%',
            'transform': 'translate(-50%, -50%)'
        });
    
        css(alert_text, {
            'padding': '30px 15px',
            'border-bottom': '1px solid #ddd'
        });
    
        css(alert_btn, {
            'padding': '10px 0',
            'color': '#007aff',
            'font-weight': '600',
            'cursor': 'pointer'
        });
    
        // 内部结构套入
        alert_text.appendChild(textNode);
        alert_btn.appendChild(btnText);
        alert_box.appendChild(alert_text);
        alert_box.appendChild(alert_btn);
        alert_bg.appendChild(alert_box);
    
        // 整体显示到页面内
        document.getElementsByTagName('body')[0].appendChild(alert_bg);
    
        // 确定绑定点击事件删除标签
        alert_btn.onclick = function () {
            alert_bg.parentNode.removeChild(alert_bg);
            if (typeof callback === 'function') {
                callback(); //回调
            }
        }
    }
    function css (targetObj, cssObj) {
        var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
        for (var i in cssObj) {
            str += i + ':' + cssObj[i] + ';';
        }
        targetObj.style.cssText = str;
    }

    使用

    alert('发现新版本,请更新!', callback)

  • 相关阅读:
    SSH框架整合实现Java三层架构实例(一)
    【面试】MySQL的事务和索引
    Spring在web开发中的应用
    Freemarker 页面静态化技术使用入门案例
    jQuery EasyUI window窗口使用实例
    zTree树形菜单交互选项卡效果实现
    zTree树形菜单使用实例
    jQuery EasyUI 选项卡面板tabs使用实例精讲
    jQuery EasyUI 折叠面板accordion的使用实例
    jQuery EasyUI布局容器layout实例精讲
  • 原文地址:https://www.cnblogs.com/it-Ren/p/14701431.html
Copyright © 2020-2023  润新知