在頂部而不是底部顯示jQuery顏色選擇器

Question

我正在使用這個 Color Picker插件，它看起來似乎不錯，但是我想要做的就是使其顯示在字段頂部而不是底部。 這就是它的樣子

這是我的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>

如果有人可以協助我，我將不勝感激。

UPDATE

以下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像素，並且您可以調整該數字直到滿意為止。