Program Description
"Principle of implementation"
The fundamentals of the pop-up layer have been said to be similar in The imitation Lightbox effect.
The key place is positioning, the general relative document positioning with absolute on the line.
To move with the screen, which is relative to the window positioning, use fixed positioning.
These implementations are simple, except that the fixed IE6 is not supported.
"Compatible with IE6 fixed"
Since the IE6 itself does not support fixed positioning, it can only be simulated or tricky to implement indirectly.
The most original approach is to constantly fix the pop-up layer's position in the scroll event of the window.
Later, it was discovered that it could be achieved by reflow "uncanny".
But all of the above methods have a flaw, the pop-up layer will "shiver" when rolling, very uncomfortable (can be improved with ease, etc.).
Want not to tremble, can use HTML and CSS clever application to realize, the concrete reference 14px introduction.
The principle is to use a container instead of body, and then the body will not move absolute positioning.
It seems perfect, but there is a fatal problem, this method needs to modify the HTML structure, will affect some related things, such as window scroll events.
The program uses another method, which is implemented with the body background and expression, and the following is a compatible fixed effect:
This can be prevented by the addition of "Overflow:hidden".
The pop-up layer is then modified to "absolute" by the Append method and inserted into the positioning layer, thus achieving a fixed effect.
Because this location layer is more resource-intensive, it is inserted into the body when there is an element insertion.
When no fixed is needed, the Remove method is removed from the positioning layer and automatically removed from the body when there is no need to locate the element in the location layer.
PS: Hidden words expression will continue to execute, to remove the document to the line.
"Center Effect"
By adding a center Extender and setting Center to True, the window is automatically centered relative to the center.
The center principle is the same as The imitation Lightbox effect, by setting the negative element size by half margin and the "50%" Top/left to center.
Note that the calculation needs to be coupled with scrolltop/scrollleft when using fixed positioning.
"Covering Layer"
In an imitation lightbox effect, the IE6 overlay is done by creating a layer that covers the entire page.
With the new compatible fixed method, you do not have to do the other compatibility, as the fixed effect on the line.
The overlay is extended by Alertbox, which is actually a pop-up layer that is the same size as the window and overlaps with the window.
Since the overlay generally needs to define just one, it is made into a overlay object, which is used to call its show and close methods directly.
"Cloak Select"
Two methods of hiding a select are described in The imitation Lightbox effect: Hidden and IFRAME.
The program is obscured by an iframe and placed in a IE6 compatible extender.
When the IFRAME is positioned, be aware that the negative clienttop/clientleft of the pop-up layer will be positioned so that the border is not obscured.
Use Tips
Positioning
In addition to centering, the program is displayed according to the positioning style of the pop-up layer itself.
Not fixed positioning should be noted that in the IE6 is relative to the current window to locate, the other is relative to the first screen window to locate.
Also note that DOCTYPE must be declared in order to be properly positioned.
Program to be as versatile as possible, reduce efficiency (with 4 expression), so it is best to adjust according to the actual situation.
PS: You need to be like the positioning hint effect preset positioning, you can expand.
"Lock Keyboard"
When using the overlay layer, to prevent the user from using the keyboard to manipulate the page, you can disable it by executing preventdefault in the KeyDown of document.
If the pop-up layer requires normal operation, just perform stoppropagation on the KeyDown in the pop-up layer.
"Dragging the Window"
Here is just a simple plus drag function, to note that the fixed positioning, the calculation of drag reference objects are different.
A more detailed drag introduction can look at this drag effect.
Instructions for use
When instantiated, you must have a pop-up layer as an argument:
Optional parameters are used to set the default properties of the program, including:
Properties: Default value//description
fixed:false,//is fixed positioning
Number of zindex:1000,//Cascade
OnShow: Performing when $$.emptyfunction,//display
OnClose: Execution when $$.emptyfunction//is closed
The following methods are also available:
Show: Display pop-up layer;
Close: hides the pop-up layer;
Dispose: Destroy the program.
After adding a compatible IE6 extender, the fixed issue of the IE6 is automatically corrected and can be modified by the Fixselect property setting to see if a select Mask bug is the default.
After you have joined the Center Extender, you can set center based on the center property and default No.
repairfixed fixed fixed object, can be used independently, with append and remove methods to add and remove the required fixed elements, can only be used in IE6.
The overlay overlay object has the following properties:
Properties: Default value//description
"Color": "#fff",//Background color
"Opacity":. 5,//Transparency (0-1)
"ZIndex": 100,//Cascade values
There are show and close methods to display and hide the overlay layer.
Package Download Address
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
