jQuery颜色选择器z轴问题

我使用这个colorpicker，它是美好的。但是，我想在jQuery对话框（在表单内的输入标签上）内使用它，但问题是当出现colorpicker时，它部分位于对话框后面（在z轴上），因此无法使用。有任何想法吗？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); 
});

来源

2011-02-14 Yottagray

您需要提供一些有关此外观以及设置内容的更多信息。事实上，如果我试图回答你的问题，那么我不得不通过插件来挖掘，我不得不以某种方式知道你的“jQuery对话框”中发生了什么。这样肉身，看看它需要你。 – treeface 2011-02-14 23:16:51

你显然必须熟悉颜色选择器插件来回答这个问题。至于其他方面，我用足够的清晰度描述过使用jQuery的人：在对话框中有一个输入标签，位于表单标签内部。就是这样，非常简单。在我提供的上述链接中，在输入标签上使用的颜色选择器甚至有一个非常明显的例子。 – Yottagray 2011-02-15 14:09:08

这适用于输入。我使用这个用于我的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, .colorpicker * { 
    z-index: 9999; 
}

来源

2011-02-16 18:27:16

jQuery颜色选择器z轴问题

回答

相关问题