jQuery Color-picker z-axis problem

问题

I'm using this colorpicker, and it is wonderful. However, I want to use it inside a jQuery dialog box(on an input tag inside a form), but the problem is that when the colorpicker appears it is partially behind the dialog (on the z-axis) and therefore unusable. Any ideas?

This is the html: <input name="bgColor" class="colorSelector">

This is the 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);
});

回答1:

This works for inputs. I use this for the admin panel of my WP themes.

$selectedColor is a previously saved value or your default value.

<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>

If you're adding it to a dialog, add more z-index to the colorpicker.

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

来源：https://stackoverflow.com/questions/4998135/jquery-color-picker-z-axis-problem

标签

jquery

color-picker