js开发的弹出层如果做到点击变成最前端显示

xu81.com 发布于 2012/07/16 09:58
阅读 5K+
收藏 2
用js开发的弹出层应用,在网页有多个层的时候,通过点击其中一个使其最前端显示。我只想到用z-index来实现,比如保存当前最大的z-index,然后在层被点击时修改z-index为当前最大值+1,但是这样会使z-index无限增大,会不会对网页的速度等有影响,希望各位给予帮助,多谢。

以下是问题补充:

@xu81.com:是我说的不够明白,还是问题太低级了。我去Google上搜索过了,没结果,才来问的。或者我去找个妹子来帮我问? (2012/07/16 10:31)
加载中
1
李永波
李永波
看完后认为是一个简单的问题,但是我觉得还是 +1 更好 不是用临时变量来做交换 首先两个的效果是不一样的

A 用+1 的方式 他每次只需要处理一个 对象的Z-index 如果渲染的话应该也是只渲染这一层 并且如果我们考虑上面的层可以关闭,那么我们就能保证关闭最上面的时候能看见上一个我看见的对象。

B 用临时变量交换 第一次处理一个 对象  第二次 处理两个对象 这两个对象都要渲染 必然造成客户端处理的事情比第一个多,另外我不能保证 关闭最上面层后对象依然是我看过的顺序

C 当然这是要看需求的 如果我们限制只有100 到1000 可以使用 同时要不注意顺序 B 方法可以用 但是并没有降低客户端压力

综上所述 我选择 +1的方法

1
铂金小猪
铂金小猪
个人觉得嘛,你这个思路还是比较不错的,但是我觉得有点问题。首先,前端 得对 各个元素有着清晰的控制,包括这个元素在z轴上的位置,不能说是无止境的增大,否则一旦出问题,你根本不知道肿么查肿么改;其次,你这个需求应该是这样的,其他网页元素在一个层范围里,弹出层要必须在这个前面,所以,你只要不随意给其他网页元素乱添加 z-index就可以了,同时,尽量不要弹出多个弹出层,网页要的是简洁;最后,我觉得无限增大的话肯定会对网页性能有影响,层越多,那浏览器就得花越多的时间来索引z轴(这条纯个人臆断)。
1
谢小呆
谢小呆
artdialog 就是点击(获得焦点)时增加z-index,不记得是否可以禁止该设置了,当时我们使用的时候遇到了一个小问题,比如在弹出层上面弹出一个tip或者一个随便一个div层,这时我再次点击dialog,弹出的tip就被dialog挡住 。至于修改z-index 是否会对浏览器性能造成影响这个我还真没感觉出来,哈哈!因为同时弹出几个dialog的时候很少,毕竟我们不是做管理后台。
1
铂金小猪
铂金小猪

声明两个变量,var ziQ;//存储当前层的zi
                       var ziH=9999999;//存储需要显示的zi

给ziB绑定click事件,回复上一次点击的zi,然后记录这次点击的ID,并记录其zi值,然后修改zi属性。

比如:默认显示的是A,那么现在ID和ziQ都木有值;当点击B以后,ziQ=Bzi,ID=Bid,同时,B的zi属性被设置成ziH;点击C以后恢复B的zi为ziQ,同时设置C的zi为ziH,设置ID=Cid。

我觉得基本思路就是这样了

1
Andre.Z
Andre.Z

改个zIndex有啥问题?这个都影响速度的话,那弹出层直接不要用了。无限增大,点100次没什么,点1000次?10000次?点都要点死掉。只是修改了层的叠放顺序,对象又没多,这个能有多大影响?
当前层的zInde本来就绑定在层的属性上,直接取。页面存一个变量,当前最大值。当点击的层的zIndex和最大值一样,管都不用管,否则,页面变量+1,再赋给当前层的zIndex就是了。哪那么麻烦啊。

1
游侠
游侠

我觉得按楼主的思路+1没有什么问题。

极端情况下,怕z-index的值溢出,或者影响到其他有z-index的元素,你可以设计下,我有一个思路,比如你的浮层的z-index控制在100-1000, 然后每个浮层id都注册一个值,比如var floatWindowZ={id1:z-index1,id2:z-index2,...},每次点击复层都是最大值+1,如果最大值到1000,就将floatWindowZ重新排序下,最小的z-index设置为100,依次+1, 并将每个浮层修改对应的z-index。

0
游侠
游侠
你去找个妹子来帮你问吧
铂金小猪
铂金小猪
哈哈~这个意见比较不错。
0
xu81.com
xu81.com

引用来自“铂金小猪”的答案

个人觉得嘛,你这个思路还是比较不错的,但是我觉得有点问题。首先,前端 得对 各个元素有着清晰的控制,包括这个元素在z轴上的位置,不能说是无止境的增大,否则一旦出问题,你根本不知道肿么查肿么改;其次,你这个需求应该是这样的,其他网页元素在一个层范围里,弹出层要必须在这个前面,所以,你只要不随意给其他网页元素乱添加 z-index就可以了,同时,尽量不要弹出多个弹出层,网页要的是简洁;最后,我觉得无限增大的话肯定会对网页性能有影响,层越多,那浏览器就得花越多的时间来索引z轴(这条纯个人臆断)。

首先拜谢二师兄指导。

那这样操作如何?需要最前端显示的层(A),当前最前端显示的层(B),当点击A时,将A和B的zindex互换,不过这样无法实现层叠排序效果,可能出现的是本来页面的排序是从前到后:B>C>D>E>A,当点击A后,顺序变成了A>C>D>E>B,当A被关闭或隐藏后,最先看到的就不是B而是C了,这也是一个问题。如果不是将A的zindex变成B.zIndex+1,那就要

//伪代码
A.zIndex = B.zIndex;
B.zIndex--;
C.zIndex--;
D.zIndex--;
E.zIndex--;

这样会不会太麻烦了。

0
xu81.com
xu81.com

引用来自“谢宝龙”的答案

artdialog 就是点击(获得焦点)时增加z-index,不记得是否可以禁止该设置了,当时我们使用的时候遇到了一个小问题,比如在弹出层上面弹出一个tip或者一个随便一个div层,这时我再次点击dialog,弹出的tip就被dialog挡住 。至于修改z-index 是否会对浏览器性能造成影响这个我还真没感觉出来,哈哈!因为同时弹出几个dialog的时候很少,毕竟我们不是做管理后台。

本来想@糖饼 的,发现他两个月没上线过了。。。

会不会大部分JS UI组件都是这样处理的呢?比如extjs,记得之前extjs 2.3之前的时候也有类似的问题,以后的版本没在用过,就不清楚了。

拜谢回复。

PS:美空网的哥们,有没图能看看的?恩,你懂得。

0
黄献
黄献
z-index 层次排列的先后顺序。
返回顶部
顶部