我正在使用 codeigniter 框架,并且我正在使用 bootstrap typeahead,一切都很好,但我的问题是当我将其放入 bootstrap 模式时,bootstrap typeahead 将无法工作。有人能帮我吗?请。这是我的代码
<a data-target="ajaxify" data-toggle="modal" href="<?php echo base_url()?>task/add_task" class="no-u quick-task">
<h4>Task</h4>
<span>This is a simple description</span>
</a>
在我的add_task控制器中,我调用视图task_view.php和task.js,但似乎预输入在引导模式中不起作用。
这是task.js的内容
$(document).ready(function(){
$("#assign_to").typeahead({
source: [{value: 'Charlie'}, {value: 'Gudbergur'}]
});
});
这是task_view.php的内容:只是一个示例。
<div id="ajaxx" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<!--Your title here -->
<h3>Modal Heading</h3>
</div>
<div class="modal-body">
<form><input type="text" name="assign_to" id="assign_to" /></form>
</div>
<div class="modal-footer">
<!--Your dont change the attributes only the value here -->
<a href="#" id="n0" class="btn n0" data-dismiss="modal">Close</a>
<a href="#" id="y1" class="btn btn-primary y1" data-submit="modal">Save</a>
</div>
您需要在 .typeahead 上设置 z 索引 1051,以使其显示在模态 div 上方。
编辑
bootstrap-typeahead.js
:
this.$menu.css({
top: pos.top + pos.height,
left: pos.left,
'z-index': 9999 //maximum z-index
})
找到最高的 z-index:http://archive.plugins.jquery.com/project/TopZIndex
我不知道我是否遇到了略有不同的版本特定问题,但我使用的是 bootstrap 2.3.2,并且没有任何版本的 z-index 对我有用。我找到了另一个最终有效的解决方案:
.modal-body{overflow-y: inherit;}
发现于https://github.com/twbs/bootstrap/issues/1078,由jgutix回答
确保删除 typeahead-append-to-body="true"
我在我的自定义CSS中使用以下
.modal-body{overflow-y: inherit;}
.modal-open .dropdown-menu {
z-index: 2050;
}
有一个选项可以将下拉列表附加到模型
source : function() {},
select: function (event, ui) {},
appendTo: "#my-modal"