Example code _ jquery

This article mainly introduces the sample code for jquery to implement the pop-up window effect. For more information, see JavaScript. the pop-up window is essentially a Square area in the browser and hidden at the beginning, you can only display a JavaScript event by modifying the css attribute value.

The procedure is as follows:

• Create a loading pop-up window

The Code is as follows:

JQuery instance 1: Floating window







Pop-up window

I am the title bar! X

I am a window!

• Create a css file and display it as a pop-up window

The Code is as follows:

# Win {
/* Border */
Border: 1px red solid;
/* Window height and width */
Width: 300px;
Height: 200px;
/* Window position */
Position: absolute;
Top: 100px;
Left: 350px;
/* The window is invisible at the start */
Display: none;
}
/* Control the style of the background color */
# Title {
Background-color: blue;
Color: red;
/* Control the left padding of the title bar */
Padding-left: 3px;
}
# Cotent {
Padding-left: 3px;
Padding-top: 5px;
}
/* Control the location of the close button */
# Close {
Margin-left: 188px;
/* When you move the mouse over X, the effect of a small hand appears */
Cursor: pointer;
}

• Create a JavaScript file to display the window

The Code is as follows:

Function showWin (){
/* Locate the p node and return */
Var winNode = $ ("# win ");
// Method 1: Use js to modify the css value to achieve the Display Effect
// WinNode.css ("display", "block ");
// Method 2: Use the show method of jquery to achieve the Display Effect
// WinNode. show ("slow ");
// Method 3: fade in using the fadeIn method of jquery
WinNode. fadeIn ("slow ");
}
Function hide (){
Var winNode = $ ("# win ");
// Method 1: Modify the css Value
// WinNode.css ("display", "none ");
// Method 2: fadeOut method of jquery
WinNode. fadeOut ("slow ");
// Method 3: jquery's hide Method
WinNode. hide ("slow ");
}