Effect preview http://demo.jb51.net/js/AlertBox/index.htm
Program description
[Implementation principle]
The basic principle of the pop-up layer is similar in the lightbox effect.
The key point is positioning. Generally, you can use absolute to locate the document.
To move with the screen, that is, to locate the relative window, use fixed.
These implementations are simple except for IE6 that does not support fixed.
[Fixed compatible with IE6]
Because IE6 itself does not support fixed positioning, it can only be simulated or achieved indirectly.
The original method is to constantly modify the position of the pop-up layer in the scroll event of the window.
Later, it was discovered that it could be achieved through reflow "bizarre.
However, the above method has a defect. the pop-up layer will be "trembling" during rolling, which is very uncomfortable (you can use the easing function to improve it ).
To avoid trembling, you can use the clever application of HTML and CSS. For details, refer to the 14px introduction.
The principle is to use a container to replace the body, and then absolutely locate the unmovable body.
It seems perfect, but there is a fatal problem. This method needs to modify the HTML structure, which will affect related things, such as the scroll event of window.
The program uses another method, which is implemented through the background and expression of the body. The following is a compatible fixed effect:
CopyCode The Code is as follows: <! Doctype HTML>
Compared with the previous method, this is perfect, but there are also some problems. For example, the background of the body can only use fixed, and expression resource consumption is relatively large.
The bigger problem is that the percentage value or right/bottom cannot be used to locate the problem.
To solve this problem, the program uses a positioning layer, which uses the above method to implement fixed positioning. The size is the same as the window size and the position is coincident, as long as the general positioning method is used to locate the relative layer, it can achieve the relative window positioning effect.
The compatible program is mainly in the repairfixed object. First, set the body Background:Copy codeThe Code is as follows: if (body. currentstyle. backgroundattachment! = "Fixed "){
If (body. currentstyle. backgroundimage = "NONE "){
Body. runtimestyle. backgroundrepeat = "no-repeat ";
Body. runtimestyle. backgroundimage = "URL (about: blank )";
}
Body. runtimestyle. backgroundattachment = "fixed ";
}
Create a location layer: copy Code the code is as follows: layer = document. createelement ("
The positioning layer also needs to set "overflow: hidden", so that the document will not be automatically expanded because the pop-up layer is out of the original scope of the document.
IE6 tests the following code, and the document will expand as it is rolled down:Copy codeThe Code is as follows: <! Doctype HTML>
<HTML>
<Head>
<Style>
Body {
_ Background: URL (about: blank) fixed;
}
. Fixable {
Position: absolute;
Top: expression((document).documentelement.scrolltopight (document).doc umentelement. clientheight );
}
</Style>
</Head>
<Body>
<Div class = "fixable"> fixable </div>
</Body>
</Html>
This can be prevented by adding "overflow: hidden.
Then, the pop-up layer is changed to "absolute" positioning through the append method, and inserted to this positioning layer to achieve the fixed effect.
This positioning layer consumes resources, so it is inserted into the body only when an element is inserted.
When fixed is not required, remove the elements from the positioning layer by using the Remove Method. When no elements need to be located in the positioning layer, they are automatically removed from the body.
PS: If it is hidden, expression will continue to be executed. You need to remove the document.
[Center effect]
Add the center extension and set the center to true. Then, the window is automatically centered.
The principle of centering is the same as that of simulating lightbox. The center is centered by setting the negative element size half of the margin and the top/left of "50%.
Note that scrolltop/scrollleft must be added to the calculation when fixed is used for locating.
[Cover layer]
In the lightbox-like effect, the layer of IE6 is created by creating a layer covering the entire page.
After the new fixed-compatible method is used, no additional compatibility is required. You can simply follow the fixed effect.
The overlay layer is extended by alertbox. It is actually a pop-up layer with the same size as the window and overlap with the window.
Since the overlay layer generally only needs to be defined, here we make it into an overlay object and directly call its show and close methods when using it.
[Hide select]
Two Methods for overwriting select are introduced in the lightbox effect imitation: Hide and IFRAME.
Programs are covered by IFRAME and placed in IE6 Compatible Extensions.
When locating IFRAME, you must locate the negative clienttop/clientleft of the pop-up layer to ensure that the border is not covered.
Tips
[Positioning]
In addition to centering, the program displays the position style of the pop-up layer.
Note that when locating fixed, IE6 locates relative to the current window, while others are located relative to the first screen window.
Note that doctype must be declared to be correctly located.
In order to be as common as possible, the program reduces the efficiency (4 expressions are used), so it is best to adjust it according to the actual situation.
PS: If you want to preset positioning like the positioning prompt, you can expand it on your own.
[Lock the keyboard]
When overwriting is used, you can disable preventdefault in the keydown of the document to prevent users from using the keyboard to operate the page.
If the pop-up layer requires normal operation, you only need to execute stoppropagation in the keydown of the pop-up layer.
Drag the pop-up window]
Here is just a simple addition of the drag function, it should be noted that the fixed positioning, calculation drag reference object is different.
For more details, see the drag effect.
Instructions for use
During instantiation, a pop-up layer must be included as the parameter:
New Alertbox ( " Idbox " );Optional parameters are used to set the default properties of the program, including:
Attribute: Default Value // description
Fixed: false, // fixed Positioning
Zindex: 1000, // number of layers
Onshow: $. emptyfunction, // executed during display
Onclose: $. emptyfunction // executed when disabled
The following methods are also provided:
Show: displays the pop-up layer;
Close: hides the pop-up layer;
Dispose: destroys a program.
After the IE6 compatibility extension is added, the fixed problem of IE6 is automatically corrected. You can set whether to fix the select masking bug Based on the fixselect attribute. The default value is.
After adding the center extension, you can set whether to center based on the center attribute. The default value is no.
The repairfixed fixed object can be used independently. You can use the append and remove methods to add and remove elements that require fixed. It can only be used in ie6.
Overlay overlay objects have the following attributes:
Attribute: Default Value // description
"Color": "# fff", // background color
"Opacity":. 5, // transparency (0-1)
"Zindex": 100, // cascade Value
The show and close methods also show and hide overlay layers.
Package
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
