在顶部而不是底部显示jquery颜色选择器

Question

我正在使用this颜色选择器插件，它看起来似乎没问题，但我想要的只是让它出现在字段顶部而不是底部。这就是它的样子

这是我的html字段

<input type="text" name="slide_background" class="form-control" placeholder="Choose background color" id="picker">

这是我的JavaScript

<script>
    $(function ($) {
        $('#picker').colpick({
            layout:'hex',
            submit:0,
            colorScheme:'dark',
            onChange:function(hsb,hex,rgb,el,bySetColor) {
                $(el).css('border-color','#'+hex);
                if(!bySetColor) $(el).val(hex);
            }
        }).keyup(function(){
            $(this).colpickSetColor(this.value);
        });
    });

</script>

如果有人能帮助我，我将非常感激。

更新

跟着css为我修好了

.colpick_hex { 
margin-top: -235px !important;
}

Answer 1

试试这个脚本，

$(function ($) {
        $('#picker').colpick({
            layout:'hex',
            submit:0,
            colorScheme:'dark',
            onBeforeShow:function() {
                 var top = $('.colpick_dark').position().top - 200;
                 $('.colpick_dark').css({top:top+'px'});
            },
            onChange:function(hsb,hex,rgb,el,bySetColor) {
                $(el).css('border-color','#'+hex);
                if(!bySetColor) $(el).val(hex);
            }
        }).keyup(function(){
            $(this).colpickSetColor(this.value);
        });
    });

通过调整代码中的200来调整选择器的顶部。初始化时检查onBeforeShow功能。

Answer 2

您只需要使用css放置它，如果使用检查器，您可以看到选择器的ID是colpick_abs - 所以...

    #colpick_abs{
        top: -300px;
        bottom: 300px;
    }

这应该将它向上滑动300像素，您可以调整该数字直到您喜欢它。