Create a beautiful pop-up layer in the Web Front-end design mode _ jquery

Ben is responsible for a book purchase website recently. on the homepage of the website, there is a section called "latest shelving". The content of the section is relatively simple, with only the book name, author's name and mounting time (). I didn't have too many ideas when I first designed it.
Now the question is, this forum is not big, but the update frequency is very high. Every day, there are more than a dozen of the latest information. The members who browse the website are getting more and more familiar with the latest books, therefore, this section needs to be improved to meet the needs of members. The main requirements of members include the following: display the thumbnail of the cover of the latest book, the name and author name of the book, as well as the introduction of some content of the book and the introduction of the author...
Ben is broken down, and there is no extra space on the home page. How can I present the thumbnail of the cover or even the content? If I remove the space of other sections to expand this section, it is no different from creating another department at the expense of one department in a company...
So Ben came up with a pop-up layer to display the details of each piece of information...
Design goals:
Without changing the page structure, increase the page information by using the pop-up layer (using Dom reconstruction to append and remove elements...
Solution:
First, we design a Div with the following style:

The Code is as follows:

. TipDiv
{
Width: 500px;
Height: 120px;
Padding: 8px;
Border-top: solid 5px # a6c9e2;
Border-bottom: solid 5px # a6c9e2;
Border-left: solid 1px # a6c9e2;
Border-right: solid 1px # a6c9e2;
Background: # ffffff;
Z-index: 10;/* z-index is very important. It determines the order in which Div boxes are stacked on the page */
Position: absolute;/* absolute position, which determines that the element can be stacked on other elements based on top and left */
}
. TipDiv img
{
Width: 110px;
Height: 110px;
Margin-right: 36px;
Margin-left: 10px;
Float: left;
}
. TipDiv span
{
*/
Width: 340px;
Height: 110px;
Float: left;
Word-break: break-all;
Border-top: dashed 1px #3a7ac8;
Margin-top: 8px;
}

The following is a script that responds to the pop-up box event when the mouse passes:

The Code is as follows:

$ (Document). ready (function (){
// Cursor over the title
$ ("Ul li a"). mousemove (function (e ){
$ (". TipDiv"). remove (); // if this element exists on the page, remove it... 0
Var x = e. clientX + 10; // obtain the x axis coordinate of the mouse
Var y = e. clientY + 10; // obtain the y axis of the mouse
Var num = $ (this). attr ("id ");
Var imgs;
Var word;
Var name;
Switch (num)
{
Case "1": {imgs = "images/mimi.bmp"; name = "secret Lambda (Rhonda Byrne )... "; word =" this is a sacred secret garden, living in Alice... "; break ;}
Case "2": {imgs = "images/mama.bmp"; name = "A Mother's memories... "; word =" this is a story about the mother, infecting every Chinese. She is a violent family mother and a mother who donated liver to her son, she is also a great, typical Chinese mother... "; break ;}
Case "3": {imgs = "images/nikesong.bmp"; name = "grandpa Nick tells a story (butworth, although)..."; word ="★The world's most outstanding children's picture book writers and painters!
★Received the 1992 British Book Awards Award)
★A picture book created by him is bought every 15 minutes in the world.
★His picture book makes reading pleasing to the eye! "; Break ;}
Case "4": {imgs = "images/lqz.bmp"; name = "Li Qingzhao: Life is nothing more than a splendid flower )... "; word =" "Li Qingzhao: Life is nothing more than a gorgeous flower" selected Yi 'an CI as 50 First, starting from "Wuling spring (wind dust fragrant flowers have been done, the conclusion of "good news" is over. I will comment on and explain this article in a simple and sincere way. "; Break ;}
}
PopDiv (imgs, name, word, x, y );
})
// Move the title cursor away
$ ("Ul li a"). mouseout (function (){
$ (". TipDiv"). remove ();
})
})

// Information box that moves with the mouse
Function popDiv (face, name, info, xx, yy)
{
Var str = "";
Str + ="

";
Str + = "";
Str + =""+ Name +"
";
Str + = "" + info + "";
Str + ="

";
$ ('Body'). append (str); // append this element to the page. The style has been written above.
$ (". TipDiv ").css ({" top ": yy +" px "," left ": xx +" px "}); // set the position where the element appears (the deviation between the right and bottom of the mouse is 10 px)
}

Results ):

Here, the member has a new requirement, that is, do not move the pop-up box as the mouse moves. Once the mouse leaves the focus, the pop-up box will be removed, the operation is not very convenient. They asked the pop-up box to be fixed. Assume that the pop-up box is on the right of the corresponding data row, and the opening and closing are controlled by the members themselves, so Ben made improvements...
Similarly, first design a Div element whose id is tips. The style is as follows:

The Code is as follows:

# Tips
{
Background-color: white;
Border-left: 1px solid # a6c9e2;
Border-right: 1px solid # a6c9e2;
Border-top: 5px solid # a6c9e2;
Border-bottom: 5px solid # a6c9e2;
Width: 268px; height: 60px;
Z-index: 9;
Position: absolute;
-Moz-border-radius: 5px;-webkit-border-radius: 5px;
Padding: 8px 18px;
}
/* The icon pointing to the pop-up layer, left:-10 to make it appear on the left side of the entire Div */
# Tips # tipsArrow {position: absolute; top: 26px; left:-10px}
# Tips # light
{
Width: 36px;
Height: 36px;
Margin: 6px 16px 16px 16px;
Float: left;
}
# Tips span
{
Margin-top: 18px;
}
# Tips # close
{
Width: 20px;
Height: 16px;
Border: none;
Z-index: 1;
Left: 280px;
Top: 6px;
Position: absolute;
Cursor: pointer;
}

The script is as follows:

The Code is as follows:

$ (Document). ready (function (){
// Time cursor
$ ("Ul li span"). mouseover (function (){
$ ("# Tips"). remove ();
Var elem = $ (this). parent ();
Var mTop = elem. offset (). top; // obtain the top coordinate of the element.
Var mLeft = elem. offset (). left; // obtain the left coordinate of the element.
Var addLeft = elem. width (); // gets the width of the element.
Var finalTop = mTop-30; // gets the Top position where the final element appears, where-30 elements increase the height of this Div and let the arrow point to the corresponding row
Var finalleft = mLeft + addLeft + 20; // obtain the final element that appears as Left. Add the row width and 20 null elements to the Left of the corresponding row.
Var num = $ ("li"). index (elem) + 1;
PopDiv1 (finalTop, finalleft, "the prompt box reminds you that this is the data row" + num +! ");
})
})
// Fixed information box
Function popDiv1 (tops, lefts, messages)
{
Var str = "";
Str ="

"+ Messages +"

";
$ ('Body'). append (str );
$ ("# Tips" ).css ({"top": tops + "px", "left": lefts + "px "});
}
Function closeUp ()
{
$ ("# Tips"). remove ();
}

The final result is as follows:

Move the cursor over the corresponding data row, and a prompt box is displayed. The cross icon on the right is used to close the entire pop-up layer...
Design summary:

The key to this design process is position: absolute (absolute positioning, which enables layers to stack on pages), z-index (used to display the stack order of layers ), top, left (display page coordinates), (offset (). left, offset (). top) locate the coordinates of an element on the page and locate the position. You can locate the pop-up layer around it at will, other styles can be adjusted as needed by the artist...

Source code download http://xiazai.jb51.net/201010/yuanma/popDiv.rar