自定义模态框(弹出框)

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

需求:
1、模态框在浏览器居中显示
2、有关闭和确认功能
3、弹出模态框后使浏览器蒙层( 遮罩层),不能进行原始界面的操作


<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">Xbutton><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+=("

"+this.TextValue+"

"
); }
script> html>

结果如图所示

自定义模态框(弹出框)_第1张图片
总结:
本文使用了面向对象的实现自定义弹出框,点击模态框确认后能将模态框的内容展现在页面上。虽然模态框有点丑,功能满足就行,以后有时间可好好学习CSS样式!

你可能感兴趣的:(笔试和面试总结)