怎么解决jquery 对话框控件对颜色选择控件的覆盖(窗口Z-order怎么设定)
本帖最后由 vc_coldplay 于 2013-11-20 16:11:45 编辑
项目要实现的是:
1、点击按钮弹出一个参数配置窗口(对话框)。
2、在配置窗口中点击某个文本框,可在当前窗口之上弹出颜色选择窗口来选择颜色。
在网上下了很多jquery控件,LeanModal,iColorPicker等等。
这两步分开单独实现是很容易的,但一旦合在一起实现就会出现问题。
因为对话框控件弹出时本身就会置于窗口最顶层,这种情况下弹出颜色选择窗口时,颜色选择窗口将显示在配置窗口的下层,被配置窗口部分覆盖。此时的Z-ORDER为 主页面--颜色选择窗口--参数配置对话框。
而我需要颜色选择窗口显示在配置窗口之上,Z-order为主页面--参数配置对话框--颜色选择窗口。
想问下有没有人做过类似的功能,是怎么实现的?
------解决方案--------------------
网页的层都是用定位实现的,一般是绝对定位(position:absolute),绝对定位的元素脱离文档流,可以定位到页面任意位置,同一位置的多个定位元素之间的上下关系由z-index决定,z-index高的显示在上,低的被遮盖;
一般弹出层组件内部会写管理器管理弹出层之间的z-index保证后弹出的层显示在上,但你这个是不同组件弹出的,所以可能出现层级混乱;你这个可以靠给颜色选择框设置一个高的z-index简单解决,firebug抓一下对话框弹出层和颜色选择框,看看它们各自的z-index,然后jquery选中颜色框,设置一个比对话框弹出层高得多的z-index即可