A pop-up dialog box with magnification effect produced by JQuery (no jquery plugin added) Share_jquery

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:

Copy code The code is as follows:

< ;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;
}

• thumb


• thumb


• thumb
;thumb

• thumb


• thumb
;/li>

• thumb

Loading....

< ;/html>


Added mask effect, you can delete it directly if you don’t need it.