自定义模态框（弹出框）

来源：互联网发布：浪潮软件二级部门编辑：程序博客网时间：2024/05/19 04:52

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样式！

1 0

自定义模态框（弹出框）

3月份做了比较多的在线能力测试或笔试题 ，我记得有一道题是自己使用原生js实现一个组件实现自定义的模态框或弹出框

结果如图所示

3月份做了比较多的在线能力测试或笔试题，我记得有一道题是自己使用原生js实现一个组件实现自定义的模态框或弹出框