jQuery 颜色选择器 z 轴问题

我正在用这个选色器 http://www.eyecon.ro/colorpicker/#about，这真是太棒了。但是，我想在 jQuery 对话框中使用它（在表单内的输入标记上），但问题是当颜色选择器出现时，它部分位于对话框后面（在 z 轴上），因此无法使用。有任何想法吗？

这是 HTML：<input name="bgColor" class="colorSelector">

这是js：

$('.colorSelector').ColorPicker({
    onSubmit: function(hsb, hex, rgb, el) {
        $(el).val(hex);
        $(el).ColorPickerHide();
    },
    onBeforeShow: function () {
        $(this).ColorPickerSetColor(this.value);
    }
})
.bind('keyup', function(){
    $(this).ColorPickerSetColor(this.value);
});

这适用于输入。我将其用于 WP 主题的管理面板。

$selectedColor 是之前保存的值或您的默认值。

<input type="hidden" name="myColor" id="myColor" value="<?=$selectedColor?>"/>
<div class="colorSelector" id="myColorPicker">
    <div style="background-color: <?=$selectedColor?>"></div>
</div>
<script type="text/javascript">
   jQuery(document).ready(function($){
       jQuery('#myColorPicker').ColorPicker({
       color: '<?=$selectedColor?>',
           onShow: function(colpkr) {
               jQuery(colpkr).fadeIn(500);
               return false;
               },
           onHide: function(colpkr) {
               jQuery(colpkr).fadeOut(500);
               return false;
               },
           onChange: function (hsb, hex, rgb) {
               jQuery('#myColorPicker div').css('backgroundColor', '#' + hex);
               jQuery('#myColor').val('#' + hex);
           }
       });
  });
</script>

如果要将其添加到对话框中，请向颜色选择器添加更多 z-index。

.colorpicker, .colorpicker * {
    z-index: 9999;
}