search

Home  >  Article  >  Web Front-end  >  AlertBox pop-up layer information prompt box effect implementation steps_javascript skills

AlertBox pop-up layer information prompt box effect implementation steps_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:18:501197browse

In the imitation Lightbox effect, this effect has been basically achieved. This time it mainly improved the jitter problem of IE6 when it was fixed.
In addition, a fixed method has been added to be compatible with IE6, the overlay has been re-packaged, and the program has been changed into a component structure.
Compatible with: ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0

Effect previewhttp://demo.jb51.net/js/AlertBox /index.htm

Procedure Description

【Implementation Principle】

The basic principles of the pop-up layer have already been discussed in the imitation Lightbox effect.
The key point is positioning. Generally, absolute is sufficient for relative document positioning.
To move with the screen, that is, position relative to the window, use fixed positioning.
These are very simple to implement, except that fixed ie6 is not supported.


【Fixed compatible with ie6】

Since IE6 itself does not support fixed positioning, it can only be implemented indirectly through simulation or trickery.
The most original method is to continuously correct the position of the pop-up layer in the scroll event of the window.
Later someone discovered that it could also be achieved "bizarrely" through reflow.
However, the above methods have a flaw. The pop-up layer will "shake" when scrolling, which is very uncomfortable (can be improved by using easing, etc.).

If you want to avoid shaking, you can achieve this through the clever application of html and css. For details, please refer to the introduction of 14px.
The principle is to use a container to replace the body, and then absolutely position the non-moving body.
It seems perfect, but there is a fatal problem. This method needs to modify the html structure, which will affect some related things, such as the scroll event of the window.

Another method is used in the program, which is achieved through the background and expression of the body. The following is a compatible fixed effect:

Copy codeThe code is as follows:







< div class="fixable">fixable




Compared with the previous method, this is more perfect , but there are also some problems. For example, the background of the body can only be fixed, and using expression consumes relatively large resources.
The bigger problem is that it cannot be positioned using percentage values ​​or right/bottom.
In order to solve this problem, the program uses a positioning layer. This layer uses the above method to achieve fixed positioning. The size is the same as the window size and the position coincides. Then as long as the general positioning method is used to position relative to this layer, it can be achieved. The effect of relative window positioning.

The compatible program is mainly in the RepairFixed object. First set the body background:
Copy the code The 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 the positioning layer again:
Copy the code The code is as follows:

layer = document. createElement("
");

The positioning layer also needs to be set to "overflow:hidden". The advantage is that the document will not be automatically expanded because the pop-up layer is outside the original scope of the document.
ie6 tests the following code, the document will continue to expand as it scrolls down:
Copy the code The code is as follows:







fixable





加上"overflow:hidden"就可以防止这种情况。

然后弹出层通过append方法修改为"absolute"定位，并插入到这个定位层，这样就能实现fixed效果了。

由于这个定位层比较耗资源，所以在有元素插入时才会插到body中。
在不需要fixed的时候，要用remove方法从定位层中移除，当定位层内没有需要定位元素就会自动从body移除。
ps：隐藏的话expression还会继续执行，要移出文档才行。


【居中效果】

加入居中扩展程序，并且设置center为true，就会自动相对窗口居中。
居中的原理跟仿Lightbox效果是一样的，通过设置负的元素尺寸一半的margin和"50%"的top/left来居中。
要注意的是不是使用fixed定位时，计算需要加上scrollTop/scrollLeft。


【覆盖层】

在仿Lightbox效果中，ie6的覆盖层是通过创建一个覆盖整个页面的层来做的。
使用新的兼容fixed方法后，就不用另外做兼容，按照fixed的效果做就行了。
覆盖层是由AlertBox扩展而来，它其实就是一个大小跟窗口一样，并且跟窗口重合的弹出层。
由于覆盖层一般只需要定义一个就行了，这里把它做成一个OverLay对象，使用时直接调用它的show和close方法。


【遮盖select】

在仿Lightbox效果中介绍过两种遮盖select的方法：隐藏和iframe。
程序是通过iframe来遮盖的，放在ie6的兼容扩展程序中。
在iframe定位时要注意，要定位到弹出层的负的clientTop/clientLeft，这样才能保证边框不会被遮住。


使用技巧

【定位】

除了居中，程序会按照弹出层本身的定位样式来显示。
不是fixed定位时要注意，在ie6是相对当前窗口来定位的，其他都是相对第一屏窗口来定位的。
还要注意，必须声明DOCTYPE，才能正确定位。
程序为了尽量通用，降低了效率（用了4个expression），所以最好还是根据实际情况自己来调整。
ps：需要像定位提示效果那样预设定位的话，可以自行扩展。

【锁定键盘】

使用覆盖层时，为了防止用户通过键盘操作页面，可以在document的keydown中执行preventDefault来禁用。
如果弹出层需要正常操作，只要在弹出层的keydown中执行stopPropagation就行了。

【拖动弹窗】

这里只是简单的加上拖动功能，要注意的是fixed定位时，计算拖动的参考对象是不同的。
更详细的拖动介绍可以看看这个拖动效果。


使用说明

实例化时，必须有弹出层作为参数：

new AlertBox("idBox");


Optional parameters are used to set the default attributes of the program, including:
Attribute: Default value//Description
fixed: false,//Whether the positioning is fixed
zIndex: 1000,// Number of cascades
onShow: $$.emptyFunction,//Executed when displayed
onClose: $$.emptyFunction//Executed when closed

The following methods are also provided:
show: display the pop-up layer;
close: hide the pop-up layer;
dispose: destroy the program.

After adding the extension compatible with ie6, the fixed problem of ie6 will be automatically corrected. You can set whether to fix the select mask bug according to the fixSelect attribute. The default is yes.
After adding the centering extension, you can set whether to center according to the center attribute. The default is no.

RepairFixed corrects fixed objects and can be used independently. It has append and remove methods to add and remove elements that need to be fixed. It can only be used in IE6.
OverLay overlay object has the following attributes:
Attribute: Default value//Description
"color": "#fff",//Background color
"opacity": .5,// Transparency (0-1)
"zIndex": 100, // Overlay value
There are also show and close methods to display and hide the overlay.

Package download address

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (4)_javascript skillsNext article：Teach you step by step how to write a fade-in and fade-out plug-in with image annotations (4)_javascript skills

Related articles

See more