JQuery color picker z-axis task

Question

I use this colorpicker and it is wonderful. However, I want to use it in the jQuery dialog box (in the input tag inside the form), but the problem is that when the colorpicker is displayed, it is partially behind the dialog (along the z axis) and therefore unsuitable. Any ideas?

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

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

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

$ selectedColor is the previously saved value or the 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 add it to the dialog, add more z-index to the colorpicker.

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