Javascript 如何让这个颜色选择器在没有滚动条的模式中显示？_Javascript_Jquery_Css_Twitter Bootstrap

Javascript 如何让这个颜色选择器在没有滚动条的模式中显示？

javascript jquery css twitter-bootstrap

Javascript 如何让这个颜色选择器在没有滚动条的模式中显示？,javascript,jquery,css,twitter-bootstrap,Javascript,Jquery,Css,Twitter Bootstrap,我有一个带颜色选择器的引导模式。当我选择更改颜色时，除非向下滚动，否则无法看到完整的托盘作为测试，我在模式中放置了一个jqueryui日期选择器，当您单击它时会显示完整的日期选择器。如何获得与colorpicker相同的功能？我尝试更改颜色选择器的z索引，但似乎没有任何效果（注意：我不希望模态的高度发生变化）以下是代码和代码： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"

我有一个带颜色选择器的引导模式。当我选择更改颜色时，除非向下滚动，否则无法看到完整的托盘

作为测试，我在模式中放置了一个jqueryui日期选择器，当您单击它时会显示完整的日期选择器。如何获得与colorpicker相同的功能？我尝试更改颜色选择器的z索引，但似乎没有任何效果

（注意：我不希望模态的高度发生变化）

以下是代码和代码：

<!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>


jQuery UI日期选择器-默认功能
$（文档）.ready（函数（）{
$（“#颜色选择器”）.colorpicker（）；
});
$（函数（）{
$（“#日期选择器”）.datepicker（）；
});
×
模态头
日期：
接近
保存更改

您可以设置模态体do visible的

overflow-y

属性：

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

编辑：

如果您的内容不适合该对话框，则必须更改

高度

或

最大高度

属性以适合该对话框。

您可以在打开颜色选择器的输入中添加一个事件，如下所示

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

然后单击颜色框或其他东西，将高度设置为其原始数量

希望有帮助，再见。

这只是一种解决绷带问题的方法。您可以在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;
},