E10/9/8/7:重写window.alert系统弹窗:文字过多自动换行,窗口右侧实现滑动精度条,倒计时弹窗确认关闭窗口

效果如下:

ALERT

window.alert = function(data, callback) {
    var alert_bg = document.createElement('div');
    var alert_box = document.createElement('div');
    var alert_text = document.createElement('div');
    var alert_btn = document.createElement('button'); // 使用button元素作为确认按钮
    var alert_scroll = document.createElement('div'); // 创建滚动条容器
    var alert_countdown = document.createElement('div'); // 创建倒计时显示元素
    var textNode = document.createTextNode(data ? data : '');
    var btnText = document.createTextNode('确 定');
    var countdown = 10; // 设置倒计时时间为10秒

    // 控制样式
    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%)',
        'display': 'flex',
        'flex-direction': 'column',
        'align-items': 'center',
        'justify-content': 'center'
    });

    css(alert_text, {
        'padding': '30px 15px',
        'color': 'red',
        'border-bottom': '1px solid #ddd',
        'overflow': 'hidden', // 隐藏超出部分
        'max-height': '150px', // 设置最大高度
        'line-height': '1.5', // 设置行高
        'word-wrap': 'break-word', // 允许单词内换行
        'word-break': 'break-all', // 允许在任意字符后换行
        'display': '-webkit-box', // 使用弹性盒子模型
        '-webkit-box-orient': 'vertical', // 垂直方向布局
        '-webkit-line-clamp': '8', // 限制在一个块元素显示的行数
        'overflow-y': 'auto' // 添加垂直滚动条
    });

    css(alert_scroll, {
        'height': '100%',
        'width': '5px',
        'position': 'absolute',
        'top': '0',
        'right': '0',
        'background': 'rgba(0, 0, 0, 0.1)'
    });

    css(alert_btn, {
        'padding': '10px 0',
        'color': '#007aff',
        'font-weight': '600',
        'cursor': 'pointer',
        'border': 'none',
        'background': 'none',
        'font-size': '16px',
        'display': 'none' // 初始状态不显示
    });

    css(alert_countdown, {
        'margin-top': '10px',
        'font-size': '14px',
        'color': '#888'
    });

    // 更新倒计时显示
    function updateCountdown() {
        if (countdown > 0) {
            alert_countdown.textContent = '等待 ' + countdown + ' 秒...';
            countdown--;
        } else {
            clearInterval(countdownInterval);
            css(alert_btn, {
                'display': 'block', // 显示确认按钮
                'pointer-events': 'auto',
                'opacity': '1'
            });
            alert_countdown.textContent = ''; // 清空倒计时显示
        }
    }

    // 启动倒计时
    var countdownInterval = setInterval(updateCountdown, 1000);

    // 内部结构套入
    alert_text.appendChild(textNode);
    alert_btn.appendChild(btnText);
    alert_box.appendChild(alert_text);
    alert_box.appendChild(alert_scroll); // 添加滚动条容器
    alert_box.appendChild(alert_btn);
    alert_box.appendChild(alert_countdown); // 添加倒计时显示到对话框
    alert_bg.appendChild(alert_box);

    // 整体显示到页面内
    document.getElementsByTagName('body')[0].appendChild(alert_bg);

    // 确认按钮点击事件
    alert_btn.onclick = function() {
        alert_bg.parentNode.removeChild(alert_bg);
        clearInterval(countdownInterval); // 清除倒计时
        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('上海泛微网络科技股份有限公司成立于2001年,总部设立于上海,专注于协同管理软件领域。是“国家规划布局内重点软件企业”,OA行业上交所主板上市公司。专注协同管理软件领域19年,泛微拥有自主知识产权的协同管理软件系列产品。在企业级移动互联大潮下,泛微联合腾讯、上海CA中心、契约锁达成战略联盟,于2018年9月发布新一代“智能化、平台化、全程电子化”OA产品——e-cology9.0。以更强大的后端集成平台能力,部署前端智能轻便型应用,让企业内外协同的业务流程实现全程电子化。。')
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值