日期:2014-05-16  浏览次数:20348 次

怎么解决jquery 对话框控件对颜色选择控件的覆盖(窗口Z-order怎么设定)
本帖最后由 vc_coldplay 于 2013-11-20 16:11:45 编辑
项目要实现的是:
1、点击按钮弹出一个参数配置窗口(对话框)。
2、在配置窗口中点击某个文本框,可在当前窗口之上弹出颜色选择窗口来选择颜色。
在网上下了很多jquery控件,LeanModal,iColorPicker等等。
这两步分开单独实现是很容易的,但一旦合在一起实现就会出现问题。
因为对话框控件弹出时本身就会置于窗口最顶层,这种情况下弹出颜色选择窗口时,颜色选择窗口将显示在配置窗口的下层,被配置窗口部分覆盖。此时的Z-ORDER为 主页面--颜色选择窗口--参数配置对话框。
而我需要颜色选择窗口显示在配置窗口之上,Z-order为主页面--参数配置对话框--颜色选择窗口。
想问下有没有人做过类似的功能,是怎么实现的?
jquery 对话框控件 颜色选择控件 LeanModal iColorPicker

------解决方案--------------------
引用:
Quote: 引用:

自己看看两个组件各自z-index是多少,就知道怎么回事了,
解决方法
1.修改组件,增加一个z-index的配置,也可以看组件API有没有提供修改默认z-index的方法;
2.firebug抓一下生成的html,从dom层直接操作z-index


非常感谢,没有接触过css方面的知识,能告知具体点吗,最好有例程,谢谢!

网页的层都是用定位实现的,一般是绝对定位(position:absolute),绝对定位的元素脱离文档流,可以定位到页面任意位置,同一位置的多个定位元素之间的上下关系由z-index决定,z-index高的显示在上,低的被遮盖;
一般弹出层组件内部会写管理器管理弹出层之间的z-index保证后弹出的层显示在上,但你这个是不同组件弹出的,所以可能出现层级混乱;你这个可以靠给颜色选择框设置一个高的z-index简单解决,firebug抓一下对话框弹出层和颜色选择框,看看它们各自的z-index,然后jquery选中颜色框,设置一个比对话框弹出层高得多的z-index即可