jQuery Задача выбора цвета по оси Z - PullRequest
Новая
       1

jQuery Задача выбора цвета по оси Z

2 голосов
/ 15 февраля 2011

Я использую этот 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);
});

1 Ответ

4 голосов
/ 16 февраля 2011

Это работает для входов.Я использую это для панели администратора моих тем 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;
}
...