继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

javascript封装alert()弹出框

幸福拾荒者
关注TA
已关注
手记 6
粉丝 8
获赞 190

由于各个浏览器之间的差异,弹出框不一样,这有影响页面的布局,所以自己就用原声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>

说明文档
图片描述

打开App,阅读手记
4人推荐
发表评论
随时随地看视频慕课网APP