Question

我正在使用这个colorpicker，这太棒了。但是，我想在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);
});

Answer 1

这适用于输入。我将其用于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;
}

jQuery Color-picker z轴问题

1 个答案: