Many do not say, go straight to the theme, share a magnifying effect of the popup dialog, the project can be based on their own needs to write CSS, I intend to reuse the Metro style site.
It seems that the animation effect is cool, if the added effect of the treatment is better:
Copy Code code as follows:
<title></title>
<script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<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;
}
</style>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' ul Li '). Click (function (e) {
$ ("#mask"). Fadeto (500, 0.25);
$ ("#content"). HTML ("<div>Loading....</div>");
var $t = $ (' #transition '),
To = $ (this). offset ();
var height = $ (document). Height ();
var width = $ (document). width ();
$ (' #content '). css ({width:100, height:100});
$t. CSS ({
Top:to.top + 50,
Left:to.left + 50,
Display: ' Block '
}). Animate ({
TOP:HEIGHT/2,
Left:width/2
}, the function () {
$ (this). Animate ({
top:125,
left:175
}, 600);
$ (' #content '). Animate ({
Width:width * 0.8,
Height:height * 0.8
}, the function () {
Open dialog here
$ ("#content"). HTML ("<div>hello, please put content here.</div>");
});
});
});
$ (' #transition '). Click (function (e) {
$ ("#transition"). Hide ();
$ ("#mask"). Hide ();
});
});
</script>
<body>
<form id= "Form1" runat= "Server" >
<ul>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
<li>thumb</li>
</ul>
<div id= ' mask ' ></div>
<div id= "transition" ><div id= "content" >Loading....</div></div>
</form>
</body>
Add the mask effect, if you do not need to be deleted directly.
