I saw a pop-up layer on the Yahoo homepage in the previous section and found it quite practical.
So I want to do it myself.
I am not very familiar with JavaScript, but I am still familiar with jquery.
Therefore, jquery is used as an example.
CSS styles and XHTML structures use Yahoo styles.
I only made the behavior layer (JS ).
Details Code :
Program Code
$ (Function (){
// Expand
$ ('# Bl_3'). Click (function (){
// Set the external frame to display.
// Remove left and top. Try again.
// Outputs ('{group_id'}.css ({"display": "Block "});
Detail ('items group_id'detail .css ({"display": "Block", "Left": "99px", "TOP": "6px "});
$ ('# Group'). animate ({
Left: "0"
},500 );
})
// Close the button
$ ('# Closediv'). Click (function (){
$ ('# Group'). animate ({
Left: & quot;-530 & quot"
},{ Queue: false, duration: 500, complete: cssrain });
Return false;
})
// Complete: Call back other functions after completing the animate action.
// Hide the external framework.
Function cssrain (){
Certificate ('{group_id'}.css ("display", "NONE ");
}
})
Demo: http://www.cssrain.cn/demo/yahoodiv/index.htm
Download: http://www.cssrain.cn/demo/yahoodiv/yahoodiv.rar