3月份做了比较多的在线能力测试或笔试题 ，我记得有一道题是自己使用原生js实现一个组件实现自定义的模态框或弹出框
需求：
1、模态框在浏览器居中显示
2、有关闭和确认功能
3、弹出模态框后使浏览器蒙层（ 遮罩层），不能进行原始界面的操作
<!DOCTYPE html><html><head><meta charset="utf-8"><title>自定义弹出框</title><style type="text/css">*{margin:0px;padding:0px;}body{height:1000px;}<!--#AppConfirm{position:relative;margin:0 auto;}-->#modlue{position:fixed;left:50%;top:50%;width:400px;height:260px; margin-left:-200px;margin-top:-150px;visibility:hidden;background-color:#fff;z-index:100;border:1px solid grey;overflow: hidden;}.MyHeader{width:100%;height:18%;background-color:white;margin:0px;color:black;}.top_content{font-size:24px;text-align:center}#cancle{float:right}.MyContent{width:100%;height:64%;background-color:white;}.MyBtn{width:100%;height:18%;background-color:white;}#cancleBtn,#confirm{float:right;font-size:20px;color:black;font-weight:bold;margin-right:6%;background-color:white;}#box{margin:20px 0 0 20px;background-color:white;font-size:18px;color:black;overflow: hidden;}#infoMesg p{margin:4px 15px;}</style></head><body><div id='AppConfirm'><div id="modlue"><div class="MyHeader"><button id="cancle">X</button><br/><p class="top_content">标题栏</p></div><div class="MyContent"><textarea style="width:399px;height:90%" id="TextValue" placeholder="请输入添加的数据..."></textarea></div><div class="MyBtn"><button id="cancleBtn">取消</button><button id="confirm">确认</button></div></div></div><button id="box">弹出框</button><input type="text" placeholder="验证弹出框过后不能再执行原始界面的输入操作"/><div id="infoMesg"></div></body><script>window.onload=function(){var boxBtn=document.getElementById('box');boxBtn.onclick=function(){new ShowDiv();}}function ShowDiv(){var _this=this;this.modlueDiv=document.getElementById("modlue");this.BoxBtn=document.getElementById('box');this.cancleBtn=document.getElementById("cancle");//对应div的“X”按钮的操作this.cancleBtnn=document.getElementById("cancleBtn");//对应div的取消按钮的操作this.confirmBtn=document.getElementById("confirm");this.newMask = document.createElement("div"); //遮罩层，用来屏蔽灰掉背部界面this.infoMsg=document.getElementById('infoMesg');this.textData=document.getElementById("TextValue")this.textData.value="";this.BoxBtn.disabled=true;this.modlueDiv.style.visibility="visible";this.cancleBtnn.onclick=function(){_this.CloseDiv(this);}//取消按钮this.cancleBtn.onclick=function(){_this.CloseDiv(this);}//确认按钮this.confirmBtn.onclick=function(){_this.CloseDivAndInfoMesg(this);}// 创建弹出层 遮罩层 等 if ( !document.getElementById("mask") && 1){//mask div this.newMask.id = "mask";this.newMask.style.position = "absolute";this.newMask.style.zIndex = "1";this.newMask.style.width = "100%";this.newMask.style.height = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) + 100 + "px";this.newMask.style.top = "0px";this.newMask.style.left = "0px";this.newMask.style.background = "gray";this.newMask.style.filter = "alpha(opacity=80)";this.newMask.style.opacity = "0.5";document.body.appendChild(this.newMask);}_this.mask=document.getElementById("mask");_this.mask.style.visibility="visible";}//点击取消按钮关闭模态框ShowDiv.prototype.CloseDiv=function(){this.BoxBtn.disabled=false;this.modlueDiv.style.visibility="hidden";this.mask.style.visibility="hidden";}//点击确认按钮关闭模态框，提示增加信息ShowDiv.prototype.CloseDivAndInfoMesg=function(){this.CloseDiv();this.TextValue=document.getElementById("TextValue").value;this.infoMsg.innerHTML+=("<p>"+this.TextValue+"</p>");}</script></html>
结果如图所示
总结：
本文使用了面向对象的实现自定义弹出框，点击模态框确认后能将模态框的内容展现在页面上。虽然模态框有点丑，功能满足就行，以后有时间可好好学习CSS样式！
