javascript封裝alert()彈出框
由于各个浏览器之间的差异，弹出框不一样，这有影响页面的布局，所以自己就用原声js封装了一个alert弹出框，希望对有需求的有所帮助...
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>alert</title>
<script type="text/javascript">
function ok() {
alert('ok')
}
function cancel() {
alert('cancel');
}
</script>
</head>
<body>
<p onclick="eflower_alert.show('你好！！')">alert</p>
<h1>alert函数说明文档</h1>
<p>eflower_alert.show('concent','title',ok,cancel)</p>
<p>concent:内容 必填</p>
<p>title:标题 可为空 </p>
<p>ok:确定 回调函数 可为空</p>
<p>cancel:取消 回掉函数 可为空</p>
</body>
</html>
<script type="text/javascript">
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()}}};
</script>说明文档
點擊查看更多內(nèi)容
4人點贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦