遮罩层的实现:
1、实现思路:
利用div实现遮罩层效果:利用一个全屏、半透明的div遮住页面上其它元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩层</title>
<style>
html,body {
margin:0;
height:100%;
}
#shade{
position:absolute;
top:0;
left:0;
z-index:2;
width:100%;
height:100%;
background-color:#000;
opacity:0.3;
/*兼容IE8及以下版本浏览器*/
filter: alpha(opacity=30);
display:none;
}
#modal {
position: absolute;
z-index:3;
top: 0;
bottom: 0;
left: 0;
right: 0;
width:200px;
height:200px;
margin: auto;
display:none;
background-color:#FF0;
}
</style>
<script>
window.onload=function(){
var a1=document.getElementById('a1');
var a2=document.getElementById('a2');
a1.onclick=shield;
a2.onclick=cancel_shield;
function shield(e){
e.preventDefault();
var shade = document.getElementById("shade");
shade.style.display = "block";
var modal = document.getElementById("modal");
modal.style.display = "block";
}
function cancel_shield(e){
e.preventDefault();
var shade = document.getElementById("shade");
shade.style.display = "none";
var modal = document.getElementById("modal");
modal.style.display = "none";
}
};
</script>
</head>
<body>
<a id="a1" href="#">打开遮罩</a>
<div id="shade"></div>
<div id="modal">
<a id="a2" href="#">关闭</a>
</div>
</body>
</html>
效果图:
点击“打开遮罩”:
点击关闭:
遮罩层的应用:图片模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片模态框</title>
<style>
#myImg{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#myImg:hover{
opacity: 0.7;
}
.modal{
display: none;
position: fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:100%;
padding-top:50px;
overflow: auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.9);
}
.modal-content{
margin:auto;
display: block;
width:100%;
max-width: 700px;
}
#caption{
margin:auto;
display: block;
width:80%;
max-width:700px;
text-align: center;
color: #ccc;
padding:10px 0;
height:150px;
}
.modal-content,#caption{
-webkit-animation:zoom 0.6s;
-o-animation:zoom 0.6s;
animation:zoom 0.6s;
}
@-webkit-keyframes zoom {
from{
-webkit-transform: scale(0.1);
}
to{
-webkit-transform: scale(1);
}
}
@keyframes zoom {
from{
transform: scale(0.1);
}
to{
transform: scale(1);
}
}
.close{
position: absolute;
top:15px;
right:35px;
color: #f1f1f1;
font-size: 40px;
font-weight:bold;
transition: 0.3s;
}
.close:hover,.close:focus{
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>图片模态框</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。<br/>
首先,我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<br/>
然后,我们使用 JavaScript 来显示模态窗口,当我们点击图片时,图片会在弹出的窗口中显示:
</p>
<img id="myImg" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">
<!--The modal-->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01"/>
<div id="caption"></div>
</div>
<script>
var modal=document.getElementById('myModal');
var img=document.getElementById('myImg');
var modalImg=document.getElementById('img01');
var captionText=document.getElementById('caption');
img.onclick=function(){
modal.style.display='block';
modalImg.src=this.src;
modalImg.alt=this.alt;
captionText.innerHTML=this.alt;
};
var span=document.getElementsByClassName('close')[0];
span.onclick=function(){
modal.style.display='none';
}
</script>
</body>
</html>
效果图:
点击图片:
点击“X”: