如何讓這個ColorPicker以不帶滾動條的模式顯示？

我有一個bootstrap模式w/colorpicker。當我選擇更改顏色時，除非向下滾動，否則無法看到完整的調色板。如何讓這個ColorPicker以不帶滾動條的模式顯示？

作爲一個測試，我把一個jqueryui datepicker在模式和完整的日期選擇器顯示，當你點擊它。如何獲得與顏色選擇器相同的功能？我試着改變colorpicker的z-index，但這似乎沒有做任何事情。

（注：我不想this，其中的模態變化的高度）

這裏的my fiddle和代碼：

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Datepicker - Default functionality</title> 
<script src="http://code.jquery.com/jquery-1.8.1.js"></script> 
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> 
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" /> 

<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script> 

<link href="http://evoluteur.github.com/colorpicker/css/evol.colorpicker.css" rel="stylesheet" /> 
<script src="http://evoluteur.github.com/colorpicker/js/evol.colorpicker.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function(){ 
    $("#color_picker").colorpicker(); 
}); 


$(function() { 
    $("#datepicker").datepicker(); 
}); 
</script> 
</head> 


<body> 

    <!-- Button to trigger modal --> 
    <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

    <!-- Modal --> 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>Date: <input type="text" id="datepicker" /></p> 
    <input id="color_picker" value="#92cddc"/> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
    </div> 


</body> 
</html>

來源

2013-02-16 Marissa Levy

您可以設置模式身體overflow-y財產做可見：

#myModal .modal-body { 
    overflow-y: visible; 
}

編輯：

如果您的內容不適合對話框，則必須更改height或max-height屬性以適合。

來源

2013-02-16 21:03:18 rcdmk

您可以點擊添加事件，以打開顏色選擇這樣

$(document).ready(function(){ 
    $('#color_picker').click(function(){ 
     $('.modal-body').animate({minHeight: '300px'});   
    }); 
});

，然後單擊顏色框或一些動畫高度恢復到原來的數量希望它有助於輸入，再見。

來源

2013-02-16 21:16:54

這只是一種解決方法繃帶解決方案。您可以在evol.colorpicker.js源代碼中修改以下功能。也許，您可以嘗試將其轉換爲原型或擴展函數，而無需更改源代碼。

_create: function() { 
      .............................. 
      // change the following code to pass the evt to show palette 
    if(showOn==='both' || showOn==='button'){ 
       e.next().on('click', function(evt){ 
        evt.stopPropagation(); 
        that.showPalette(evt); 
       }); 
      } 
        }    
      } 
       .................... 


    showPalette: function (e) {  
    if(this._enabled){ 
     this._active=true; 
     $('.colorPicker').not('.'+this._id).colorpicker('hidePalette'); 
     if(this._palette===null){ 
      this._palette = $('#YOUR_DIALOG_DIV_ID')           
       .after(this._paletteHTML()).next() 
       .css({ top: e.clientY + 'px', left: e.clientX + 'px', position: 'absolute' }) 
       .on('click',function(evt){ 
        evt.stopPropagation(); 
       }); 
      this._bindColors(); 
      var that=this; 
      if(this._isPopup){ 
       $(document.body).on('click.'+that._id, function(evt){ 
        if(evt.target!=that.element.get(0)){ 
         that.hidePalette(); 
        } 
       }).on('keyup.'+that._id, function(evt){ 
        if(evt.keyCode===27){ 
         that.hidePalette(); 
        } 
       }); 
      } 
     } 
    } 
    return this; 
},

來源

2015-08-11 21:27:25

如何讓這個ColorPicker以不帶滾動條的模式顯示？

回答

相關問題