原题：用js实现，弹窗弹出时需要有半透明的蒙层，位置需要根据弹窗的大小实现左右、垂直居中，对话框需要有标题栏（标题栏有关闭功能）、内容栏、操作按钮栏，不能直接使用第三方UI库
分析题目：个人把页面分为三个主体内容，触发遮罩层显示的元素、弹窗、以及遮罩层。个人觉得触发部分比较容易，重点在于弹窗和遮罩层。
动手吧：触发部分，为了让人看到它之后就觉得能够点击，所以div里面用了a标签。在进行样式设置的时候，先清除浏览器默认的边距，并将body的宽高设为100%。为了好看一点，给外层div设置了margin，并对a标签进行了外观设置。css代码如下：* {margin: 0;padding: 0;font-size: 12px;}html, body {height: 100%;width: 100%;}#outer{margin: 30px;}#outer a {font-size: 20px;font-weight: bolder;}
遮罩层：遮罩层为一个空的div，id为mask。将其宽高设为100%，给下背景色，调下透明度，相对于body进行绝对定位。从而实现整个页面都是灰色。因为它是在弹窗的下面，触发部分的上面，所以将z-index设为1。一开始的时候默认不显示，在触发部分修改display属性即可。css代码如下：#mask{ position:absolute; top:0; left:0; height:100%; width:100%; background:#000; opacity:0.2; display:none; z-index:1;}
弹窗：把弹窗的标题，主要内容以及相关操作按钮放在一个id为show的div中，给它设置一定的宽高(这里设置的宽高要注意啦，会和最后js里面调整弹窗居中显示有关)、背景颜色等，将其绝对定位，一开始也是默认不显示，因为它是在遮罩层上面，所以它的z-index比1大即可。css代码如下：#show{z-index:2;border: 1px solid #ccc;width: 300px;height: 150px;background: #e2ecf5;position: absolute;display:none;}
弹窗的标题是用一个id为title的div包起来，里面有两个span标签，分别是管理标题内容及关闭按钮的，因为js中会对关闭按钮添加事件，所以给它加一个id为close。标题部分设置了背景色、字体颜色和大小、内边距以及文字对齐方式。将关闭按钮右浮动，设置右外边距并使鼠标指向它时出现手势图标。
.title{background: #369;color: #fff;padding: 5px;text-align:center;font-size:20px;}
#close {margin-right: 5px;float:right;cursor: pointer;font-size:20px;}
弹窗主要内容方面：仅用一个p标签。使文字左对齐，为了美观增加内边距。
p {text-align:left;padding:20px;}
操作按钮部分：外层用一个id为footer的div包住，里面有两个button按钮，分别为确定和取消。让外层div整体右浮动，对于button按钮，根据需要设置相应的外观。
#footer {float:right;}
#footer button{background:#fff;height: 40px;width: 50px;font-size:1em;margin-right:.75em;border: 1px solid #ccc;}
html代码如图：
js代码部分：
var myTest=document.getElementById('test');//获取触发弹窗事件的dom
var myShow = document.getElementById("show");//获取弹窗的dom
var myMask=document.getElementById('mask');//获取遮罩层的dom
var mClose = document.getElementById("close");//获取关闭按钮的dom
var mySure=document.getElementById('sure');//获取确定按钮的dom
var myCancle=document.getElementById('cancle');//获取取消按钮的dom
myTest.onclick = function()//点击“测试”触发弹窗事件的代码
{
myMask.style.display="block";//遮罩层显示
myShow.style.display = "block";//弹窗显示
myShow.style.top = "50%";//弹窗距离顶部的距离
myShow.style.left = "50%";//弹窗距离左侧的距离
myShow.style.marginTop = "-75px";//弹窗的上边距为弹窗高度的一半
myShow.style.marginLeft = "-150px";//弹窗的上边距为弹窗宽度的一半
document.body.style.overflow = "hidden";//弹窗弹出的时候页面不能滑动
}
mClose.onclick = function()//关闭弹窗按钮
{
myShow.style.display = "none";//隐藏弹窗
myMask.style.display = "none";//隐藏遮罩层
myTest.innerHTML="你按了关闭按钮！";//改变触发事件的文字
}
mySure.onclick = function()//点击确定按钮时触发的事件
{myShow.style.display = "none";myMask.style.display = "none";myTest.innerHTML="你按了确定按钮！";}
myCancle.onclick = function()//点击取消按钮时触发的事件
{myShow.style.display = "none";myMask.style.display = "none";myTest.innerHTML="你按了取消按钮！";}
后语：这种题有好几种解决方式，最常见的莫过于用一个遮罩层div，里面包含弹窗即可，这种考察的是怎样让一个div在另一个div中水平垂直居中。
网友评论