2017春招在线编程之遮罩层
原题:用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代码如图:
<div id="outer">
<a id="test" href="#">测试</a>
</div>
<div id="show">
<div class="title">
<span>弹窗标题</span>
<span id="close">×</span>
</div>
<p>
这是行文的主要内容
</p>
<div id="footer">
<button id="sure">确定</button>
<button id="cancle">取消</button>
</div>
</div>
<div id="mask"></div><!-- 遮罩层-->
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中水平垂直居中。