Home > Developer > JavaScript
If you don't want to talk about it, go straight to the topic and share a popup dialog with the zoom-in effect. The project can write css based on your own needs. I plan to reuse it to the metro-style site.
It seems that the animation effect is cool, and the processing effect is better:
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<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" pai.html ("<div> Loading... </div> ");
Var $ t = $ ('# transition '),
To = $ (this). offset ();
Var height = $ (document). height ();
Var width = $ (document). width ();
Detail ('{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
},600, function (){
$ (This). animate ({
Top: 125,
Left: 175.
},600 );
$ ('# Content'). animate ({
Width: width * 0.8,
Height: height * 0.8
},600, function (){
// Open dialog here
$ ("# Content" pai.html ("<div> Hello, please put content here. </div> ");
});
});
});
$ ('# Transition'). click (function (e ){
$ ("# Transition"). hide ();
$ ("# Mask"). hide ();
});
});
</Script>
</Head>
<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>
</Form>
</Body>
</Html>
Added the mask effect. You can delete it if you do not need it.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
