Jquery simulates the click dialog box on the Yahoo homepage.

Jquery simulates the implementation code of the click dialog box on the Yahoo homepage. For more information, see. This shows that the results have been similar. For details, go to the script download center.

:

Statement: All I do is achieve this effect. It is not as nice as the yahoo homepage, so don't mind!

Raw materials:

Ideas:

1: Add a floating event for each li tag

2: Construct an iframe and obtain the href attribute value of Element a under the current li tag.

3: Build a DIV that contains the iframe element and display it
HTML structure:

The Code is as follows:

• News


• Sports


• Entertainment

CSS style:

The Code is as follows:

Ul {
Float: left;
}
Ul li {
Display: block;
Margin-top: 15px;
Width: 100px;
Position: relative;
}
A {
Text-decoration: none;
Color: # 8000ff;
}
. Show {
Width: 640px;
Height: 506px;
Position: absolute;
Top:-45px;
Left: 30px;
Background: url(1.gif) no-repeat;
Padding: 45px 20px 35px 40px;
}
. Close {
Width: 22px;
Height: 22px;
Float: right;
Display: block;
Margin-top:-30px;
Background: url(2.gif) no-repeat;
}
. Quick {
Position: absolute;
Top: 0px;
Left: 30px;
Background: url(3.jpg) no-repeat;
Width: 37px;
Height: 26px;
Font-size: 12px;
Color: white;
Line-height: 26px;
Text-align: center;
}

JS Code:

The Code is as follows:

$ (Document). ready (function (){
$ ('Ul li A'). hover (function (e ){
Var quickw = $ (this). parent (). parent (). find ('# clickp ');
If (quickw ){
$ ('# Clickp'). remove ();
}
$ (This). parent (). append ('

Preview

');
$ ('# Clickp'). addClass ('quick ');
$ ("# Clickp"). click (function (){
Watermarks (this).css ('display', 'None ');
Var url = $ (this). parent (). find ('A'). attr ('href ');
Var $ basep = $ (this). parent (). parent (). find ('# Windows ');
If ($ basep ){
$ ('# Windows'). remove ();
$ (This). parent ()
. Append ("

")
. FadeIn ('slow ');
$ ("Ul li # window"). addClass ('show ');
$ ('# Closebutton A'). addClass ('close ');
$ ('# Closebutton A'). click (function (){
$ ("Ul li # window"). remove ();
});
}
});