改变alert弹出框页面

window.alert = alert
function alert (data, callback) {
  var alert_head = document.createElement('div')
  var alert_bg = document.createElement('div')
  var alert_box = document.createElement('div')
  var alert_text = document.createElement('div')
  var alert_btn = document.createElement('div')
  var textNode = document.createTextNode(data ? data : '')
  var btnText = document.createTextNode('确定')
  var headText = document.createTextNode('提示信息')
}

css(alert_bg, {
   'position': 'fixed',
   'top': '0',
   'left': '0',
   'right': '0',
   'bottom': '0',
   'background-color': 'rega(0,0,0,0.1)',
   'z-index': '99999'
})

css(alert_box, {
   'width': '500px',
   'max-width': '90%',
   'font-size': '16px',
   'text-align': 'center',
   'background': '#fff',
   'border-radius': '15px',
   'position': 'absolute',
   'top': '50%',
   'left': '50%',
   'transform': 'translate(-50%, -50%)'
})

css(alert_text, {
   'padding': '10px 15PX',
   'border-bottom': '1px solid #CDCDCD'
})

css(alert_btn, {
   'padding': '10px 0',
   'color': '#007aff',
   'font-weight': '600',
   'cursor': 'pointer'
})

css(alert_head, {
   'padding': '10px 15px',
   'color': '#007aff',
   'font-weight': '600'
})

alert_text.appendChild(textNode)
alert_btn.appendChild(btnText)
alert_head.appendChild(headText)
alert_box.appendChild(alert_head)
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 callbck === '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('内容......')

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值