html alter自动弹出,javascript封装alert()弹出框

由于各个浏览器之间的差异,弹出框不一样,这有影响页面的布局,所以自己就用原声js封装了一个alert弹出框,希望对有需求的有所帮助...

`

alert

function ok() {

alert('ok')

}

function cancel() {

alert('cancel');

}

alert

alert函数说明文档

eflower_alert.show('concent','title',ok,cancel)

concent:内容 必填

title:标题 可为空

ok:确定 回调函数 可为空

cancel:取消 回掉函数 可为空

eflower_alert={LMark:null,show:function(g,h,k,i){var j=document.body;var b=document.createElement("div");b.style.background="rgba(0,0,0,.2)";b.style.position="fixed";b.style.top="0";b.style.left="0";b.style.width="100%";b.style.height="100%";b.setAttribute("id","LMark");this.LMark=b;var e=document.createElement("div");e.style.position="absolute";e.style.top="50%";e.style.left="50%";e.style.background="#fff";e.style.borderRadius="4px";e.style.transform="translate(-50%,-70%)";e.style.padding="15px 20px";e.style.width="70%";e.style.textAlign="center";b.appendChild(e);var a=document.createElement("h1");a.style.padding="0 0 10px";a.style.borderBottom="1px solid #ccc";a.style.margin="0px";a.style.color="#333";a.style.fontWeight="normal";a.style.fontSize="18px";if(typeof h!="undefined"){if(typeof h=="function"){a.innerHTML=""}else{a.innerHTML=h}}else{a.innerHTML=""}if(a.innerHTML!=""){e.appendChild(a)}var f=document.createElement("p");f.style.padding="0";f.style.lineHeight="25px";f.style.margin="10px";f.style.fontSize="14px";f.style.color="#666";f.innerHTML=g;e.appendChild(f);var c=document.createElement("button");c.style.padding="3px 15px";c.style.margin="0 15px";c.style.border="1px solid #ccc";c.style.fontSize="14px";c.style.borderRadius="4px";c.style.color="#0894ec";c.style.background="#fff";c.style.cursor="pointer";c.innerHTML="取消";c.setAttribute("id","Lback");if(typeof h!="undefined"){if(typeof h=="function"){this.cancel_event.event=k}else{this.cancel_event.event=i}if(typeof this.cancel_event.event=="function"){e.appendChild(c)}}c.setAttribute("onclick","eflower_alert.cancel_event.back()");var d=document.createElement("button");d.style.padding="3px 15px";d.style.margin="0 15px";d.style.border="1px solid #ccc";d.style.fontSize="14px";d.style.borderRadius="4px";d.style.color="#0894ec";d.style.background="#fff";d.style.cursor="pointer";d.innerHTML="确定";d.setAttribute("id","LBtn");e.appendChild(d);if(typeof h!="undefined"){if(typeof h=="function"){this.ok_event.event=h}else{this.ok_event.event=k}}d.setAttribute("onclick","eflower_alert.ok_event.go()");j.appendChild(b)},ok_event:{event:function(){},go:function(){this.event();eflower_alert.LMark.remove()}},cancel_event:{event:function(){},back:function(){this.event();eflower_alert.LMark.remove()}}};

说明文档

AAffA0nNPuCLAAAAAElFTkSuQmCC

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值