<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< Html >
< Head >
< Title > Untitled </ Title >
< Style Type = "Text/CSS" >
# Tip
{
Width : 200px ;
Border : 1px solid red ;
Height : 100px ;
Position : Absolute ;
Z-Index : 100 ;
Display : None ;
Background : #999 ; /* Note that the background color of the layer should be set here. Otherwise, IE6 will have a strange disadvantage, that is, the Click Event of the layer can be triggered only when there is text content in the click layer, other blank areas in the click layer trigger the Click Event of the document. */
}
</ Style >
< Script Type = "Text/JavaScript" SRC = "Jquery. js" > </ Script >
<SCRIPT type = "text/JavaScript" src = "jquery. bgiframe. Min. js"> </SCRIPT>
< Script Type = "Text/JavaScript" >
$ (Document). Ready ( Function (){
$ ( " # Test " ). Click ( Function (Event ){
VaR Position = $ ( This ). Offset (); // Obtain the position of an element. The event cannot be used. clientx and event. clienty, because this is only to read the current mouse position relative to the document's upper boundary, when the document content appears scroll bar, this method will not work.
$ ( " # Tip " ).Css ({left: position. Left + ' Px ' , Top :( position. Top + 20 ) + ' Px ' });
$ ( " # Tip " ). Toggle (); // You can use toggle () to automatically switch the hidden display.
Event. stoppropagation (); // Prevent event bubbles
}); // End click
$ ( " # Tip " ). Click ( Function (Event ){ // Register the Click Event of the pop-up layer. This event does not hide the layer when you click the layer. It is only used to prevent bubbling, because when you click the layer, the Click Event of the document is triggered up by default.
// Alert ("tipclick"); // used for debugging
Event. stoppropagation ();
}); // End click
$ ("# Tip"). bgiframe (); // prevents the Z-index issue in IE 6
}); // End ready
$ (Document). Click ( Function (){ // Register the Click Event of a document and click hide layer anywhere in the document
// Alert ("documentclick ");
$ ( " # Tip " ). Hide ();
}); // End click
</ Script >
</ Head >
< Body >
< A ID = "Test" Href = "Javascript: void (0 );" > Test </ A >
< Div ID = "Tip" >
I am a pop-up layer
</ Div >
</ Body >
</ Html >
Note: jquery plug-inBgiframe
The bgiframe plug-in is used to easily solve the IE6 Z-index problem. If the floating block on the webpage overlaps the drop-down menu, you can see in IE6 that the drop-down box always overwrites the floating block, no matter how you adjust the Z-index, it is useless, and bgiframe can easily solve this problem.
Usage:
$ (document ). ready ( function () {
$ ( '# floatingbox' ). bgiframe ();
});
Project homepage: http://plugins.jquery.com/project/bgiframe
: http://plugins.jquery.com/files/bgiframe_2.1.1.zip
