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

标签 javascript jquery css twitter-bootstrap

我有一个带颜色选择器的 Bootstrap 模式。当我选择更改颜色时,除非向下滚动,否则您看不到完整的调色板。

作为测试,我在模式中放置了一个 jqueryui 日期选择器,当您单击它时会显示完整的日期选择器。如何使用颜色选择器获得相同的功能?我尝试更改颜色选择器的 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>

最佳答案

你可以设置模态主体的overflow-y属性可见:

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

编辑:

如果您的内容不适合对话框,您将必须更改 heightmax-height 属性以适合。

关于javascript - 如何让这个颜色选择器在没有滚动条的模式中显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14914986/

相关文章:

javascript - 使用javascript重定向的灯箱

javascript - 处理包含事件监听器调用的 'this' 关键字的对象方法中的范围

javascript - 使用 Electron (Atom Shell) 时的客户端/服务器模型是什么?

javascript - 使用 js 提取此值的 preg 匹配是什么

jquery - 当另一个 div 在窗口中可见时隐藏元素

javascript - PHP AJAX 从下拉列表中更新 MySql 查询 onChange(过滤)

html - CSS3 动画文字颜色变化

javascript - jquery悬停下拉菜单

javascript - 简单的 jquery 计算器,其中包含来自选择的数据

jquery - ul li 行但有序