Javascript 自定义alert 提示框

//自定义alert
function alert(text) {
    //创建标签
    alert_bg = document.createElement('div')
    alert_box = document.createElement('div')
    alert_text = document.createElement('div')
    alert_btn = document.createElement('div')
    textNode = document.createTextNode(text ? text : '')
    btnText = document.createTextNode('确 定')
    //添加css样式
    addcss()
    // 内部结构套入
    alert_text.appendChild(textNode)
    alert_btn.appendChild(btnText)
    alert_box.appendChild(alert_text)
    alert_box.appendChild(alert_btn)
    alert_bg.appendChild(alert_box)
    // 确定绑定点击事件删除标签
    addEvent(alert_btn,'click',function() {
        alert_bg.parentNode.removeChild(alert_bg)
    })
    // 整体显示到页面内
    document.getElementsByTagName('body')[0].appendChild(alert_bg)
     //添加动态
    dongtais(5,30,20)
}
//便于添加css
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
}
//添加css
function addcss() {
    // 控制样式
    css(alert_bg, {
        'position': 'fixed',
        'top': '0',
        'left': '0',
        'right': '0',
        'bottom': '0',
        'background-color': 'rgba(0, 0, 0, 0.1)',//rgba(0, 0, 0, 0.1)
        'z-index': '99999',
    })
    css(alert_box, {
        'width': '270px',
        'font-size': '16px',
        'text-align': 'center',
        'background-color': '#fff',
        'border-radius': '20px',
        'position': 'absolute',
        'top': '5%',
        'left': '50%',
        'transform': 'translate(-50%, -50%)',
    })
    css(alert_text, {
        'padding': '20px 15px',
        'border-bottom': '1px solid #ddd',
        'word-wrap': 'break-word',
        'word-break': 'break-all',

    })

    css(alert_btn, {
        'padding': '10px 0',
        'color': '#007aff',
    })
}
//动态
function dongtais(top,headtop,foottop){
    var dongtai = setInterval(function () {
        top++
        alert_box.style.top = top + '%'
        if (top==headtop) {
            clearInterval(dongtai)
            dongtai = setInterval(function () {
                top--
                alert_box.style.top = top + '%'
                if (top==foottop){
                    clearInterval(dongtai)
                    dongtai = setInterval(function () {
                        top++
                        alert_box.style.top = top + '%'
                        if (top==headtop){
                            clearInterval(dongtai)
                        }
                    },1000/60)
                }
            },1000/60)
        }
    },1000/60)
}
//添加事件
function addEvent(who,events,functions) {
    who.addEventListener(events,functions)
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！