Without further ado, let’s go straight to the topic and share a pop-up dialog with a magnification effect. You can write css according to your own needs in the project. I plan to reuse it on a metro-style site.
It seems that the animation effect is quite cool. It will be better if it is processed:
< ;style>
body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; }
ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; }
#transition {
background:transparent;
display:none;
position:absolute; top:50%; left:50%; z-index:50;
z-index: 10001;
}
#content {
background:#fff;
border:1px solid #666;
margin:-50px 0 0 -50px;
width:100px; height:100px;
z-index: 10001;
}
#mask{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
display: none;
z-index: 10000;
}
.close
{
width:30px;
height:20px;
background-color:Red;
cursor:pointer;
display:none;
}
.closeShow
{
width:30px;
height:20px;
margin-left:50px;
margin-top:-100px;
background-color:Red;
cursor: pointer;
}
< ;/html>
Added mask effect, you can delete it directly if you don’t need it.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
