采用原生的JavaScript,
html代码
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <style> .div{ border:4px dashed #ccc;margin:130px auto; text-align:center; font-size:25px; width:100px; height:100px; padding:40px; } </style> <script src="alert.js"></script> <div class="div" onclick="alert(‘hello javascript!‘)">点击我</div>
js代码
//自定义弹框 function alert(context,title){ //创建弹框div var alertFram = document.createElement("div"); alertFram.id="alertFram"; alertFram.style="position: absolute; width: 280px; height: 150px; left: 50%; top: 50%; margin-left: -140px; margin-top: -110px; text-align: center; line-height: 150px; z-index: 300;"; var strHtml=‘‘; strHtml+=‘<div style="list-style:none;margin:0px;padding:0px;width:100%">‘; strHtml+=‘ <div id="alertFramTitle" style="background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white">[中奖提醒]</div>‘; strHtml+=‘ <div id="alertFramContext" style="background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#fff"> 100000 元</div>‘; strHtml+=‘ <div style="background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;"><input type="button" value="确 定" onclick="doOk()" style="width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px"></div>‘; strHtml+=‘ </div>‘; alertFram.innerHTML = strHtml; //将弹框添加到页面末尾 document.body.appendChild(alertFram); //title var alertFramTitle=document.getElementById("alertFramTitle"); alertFramTitle.innerHTML = title || "[温馨提示]";//默认值 //context var alertFramContext=document.getElementById("alertFramContext"); alertFramContext.innerHTML = context || "";//默认值 } //确定按钮 function doOk(){ //移除弹框 var x=document.getElementById("alertFram"); x.remove(); }
优点:简单,非阻塞式弹框,依赖少(不需要jquery)
缺点:输入文本不能太长否则文字显示不全(因为大小固定),样式不好看(需要优化),代码修改起来困难(最好是使用面向对象的方式)
留坑,有待优化!!!
原文地址:https://www.cnblogs.com/1906859953Lucas/p/10843740.html
时间: 2024-10-11 08:33:31