jquery Tools Series Overlay Learning 1th/2 page _jquery

As scrollable learning, first give the HTML object code for the operation:

Copy Code code as follows:

<button rel= "#overlay" >open overlay</button>
<button rel= "#overlay2" >other overlay</button>
<div class= "Overlay" id= "overlay" >
&LT;H2 style= "margin:10px 0" >here is my overlay<p style= "Float:left; margin:0px 20px 0 0; " >
<span>$$$$$$$$$$</span>
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per Conubia Nostra,
Per Inceptos Himenaeos. Donec lorem Ligula, Elementum vitae,
Imperdiet A, posuere nec, Ante. Quisque mattis Massa ID metus.
</p>
</div>
<div class= "Overlay" id= "Overlay2" >
&LT;H2 style= "margin:10px 0" >here is my another overlay
<p>
Class aptent taciti sociosqu ad litora torquent per Conubia Nostra,
Per Inceptos Himenaeos. Donec lorem Ligula, Elementum vitae,
Imperdiet A, posuere nec, Ante. Quisque mattis Massa ID metus.
</p>
<div>
<button id= "Overlayclose" >close</button>
</div>
</div>

This feature is implemented through the Jqueryobject.overlay () method, where the overlay method provides the following two ways:
1. $ ("Button[rel]"). Overlay ()//The method can display the hint by default method overlay
2. $ ("Button[rel]"). Overlay ({Config object})//The method customizes the display of overlay by configuring the object in the future.
The following code is implemented for the configuration parameter of the second way (simply place the implementation in the Ready method of jquery):

Copy Code code as follows:

$ ("#overlay"). Overlay ({api:true}). Load ()///Automatically display overlay (no triggering, automatically triggered when page load completes)
$ ("Button[rel]"). Overlay ({
start:{
WIDTH:300,
Absolute:false
},
finish:{
Top:10,
left:400,
Absolute:false
},
speed:3000,
fadeinspeed:3000,
Closeonclick:false,
Oneinstance:false,
Close: ' #overlayClose ',//Custom off button
Expose: ' #BAD0DB '//Mode one: Set only in a simple background-color string
Expose: {//Mode two: Expose function configuration item mode set
Color: ' #BAD0DB ',
opacity:0.7,
closespeed:1000
},
Onbeforeload:function () {
Alert (This.gettrigger (). attr ("rel") + ": onbeforeload")//Display trigger overlay property value for this rel prompt box
},
Onload:function () {
Alert (This.gettrigger (). attr ("rel") + ": OnLoad");
},
Onbeforeclose:function () {
Alert (This.gettrigger (). attr ("rel") + ": Onbeforeclose");
return false;
}
});

The above configuration parameter descriptions are described below:

Property	Default value	Description
Start (Object)	{top: ' center ', Left: ' Center ', width:0,absolute:false}	Used to set the position and size of the overlay pop-up box to start. By default, the position of the overlay pop-up box begins at the position of its trigger (that is, the page element it displays), and the initial size of the overlay pop-up is 0, and if overlay is not triggered by a page element, then his starting position is the middle position of the screen. You can override the default value for this property by setting the following parameters:
		Top: Lets you set the start position of the overlay pop-up box according to the distance on the upper edge of the screen.
		Left: lets you set the distance of the overlay pop-up box at the beginning of the screen to the right edge.
		Width: Used to set the width of the overlay pop-up box at the beginning (that is, the initial width of the pop-up), and the overlay at the beginning is automatically calculated based on the width.
		Absolute: If the value is set to true, the position at the beginning of the overlay pop-up box is calculated based on the upper-left corner of the browser window, regardless of the scrolling position. If the value is set to, the position at the beginning of the overlay pop-up box will be counted in the scroll position.
Finish (Object)	{top:100,left: ' Center ', absolute:false}	Lets you set the position and size of the overlay pop-up box. , you can override the default value for this property by setting the following parameters:
		Top: Lets you set the overlay popup's final position according to the distance on the screen's upper edge.
		Left: lets you set the distance of the final position of the overlay pop-up to the left-hand edge of the screen.
		Absolute: If the value is set to True, the final position of the overlay pop-up box is calculated from the position of the upper-left corner of the browser window regardless of the scrolling position. If the value is set to, then the position of the overlay pop-up box will be counted in the scroll position.
		Additionally, the size of the final position of the overlay pop-up is set by the associated CSS property.
Expose		Overlay pop-up boxes are often used in conjunction with the expose feature. And the way they are used is set by the overlay configuration attribute. This configuration item accepts the configuration object for the expose feature. The property accepts two types of arguments: A string that accepts only the expose background color setting, and a expose configuration object. The two parameters of this property can be seen in the example in this article.
Speed	' Normal '	Sets the speed at which the overlay pop-up box pops up. The valid values accepted by this property are: Slow,normal,fast, and the number of milliseconds. If the property value is set to 0, the overlay pop-up appears immediately without animation.
Fadeinspeed	' Fast '	Sets the speed at which content is displayed in the Overlay pop-up box, which accepts valid values that pass speed properties.
Oneinstance	TRUE	By default, a page displays only one overlay pop-up box. However, you can allow the page to display multiple overlay pop-up boxes by setting this property to False. (Note: This property can have a more obvious effect if the Closeonclick is set to false.) ）
Closeonclick	TRUE	By default, you can turn off the overlay pop-up box by clicking on a different area outside the overlay pop-up box in the page. However, setting this property to False can mask the feature.
Preload	TRUE	By default, background pictures are preloaded into the browser's cache. So, when the overlay balloon is open, the background picture of the overlay balloon has been loaded into the cache, so when the overlay prompt box is triggered, the entire balloon pop-up process is smooth. In addition, you can block the preload of a background picture by setting the property to False.
Close		Turn off the button settings. If the user does not provide a overlay prompt box Close button at this point, the overlay prompt box automatically produces a close button. Please refer to the relevant examples in this article about how users customize the Turn off Overlay prompt button.
ZIndex	9999	Set the Z-index attribute (CSS) for the overlay prompt box, and for the Z-index property, see the relevant information. This property has been set to a high value of 999, so the property does not need to be set again in general. However, it should be noted that the value should be greater than the Z-index value of the other elements of the pass page.
Target		If the Rel property does not specify a overlay prompt box, you can set the overlay prompt box element by using this property.
Onbeforeload	None	callback function, which executes before the overlay prompt box is triggered, and if the function returns false, the overlay balloon is blocked and not displayed.
OnLoad	None	A callback function that is executed after the overlay prompt box is triggered.
Onbeforeclose	None	The callback function. This property is executed before the overlay prompt box closes after the overlay prompt box closes the event. Returns false to prevent the overlay prompt box from closing.
OnClose	None	The callback function. This property is triggered when the overlay prompt box closes.
Api	FALSE	This property sets the API properties for the same Selector,tab feature. This attribute is referred to in this series Selector,tab related instructions.

Current 1/2 page 12 Next read the full text