手写alert弹框

Posted 2021-11-28 1906859953lucas

 

采用原生的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）

缺点：输入文本不能太长否则文字显示不全（因为大小固定），样式不好看（需要优化），代码修改起来困难（最好是使用面向对象的方式）

留坑，有待优化！！！