Question

我正在使用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，但似乎typeahead在bootstrap模式中不起作用。

这是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">&times;</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>

Answer 1

你需要在.typeahead上放置一个1051的z索引，让它出现在模态div之上。

Answer 2

修改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

Answer 3

我不知道我是否遇到了与版本无关的问题，但是我使用的是bootstrap 2.3.2并且没有版本的z-index对我有用。我找到了另一个最终解决方案：

.modal-body{overflow-y: inherit;}

在https://github.com/twbs/bootstrap/issues/1078找到，由jgutix回答

Answer 4

确保删除typeahead-append-to-body =＆＃34; true＆＃34;

https://github.com/angular-ui/bootstrap/issues/3262

Answer 5

我在我的自定义css中使用

.modal-body{overflow-y: inherit;}

.modal-open .dropdown-menu {
  z-index: 2050;
}

working example of use

Bootstrap typeahead不在Bootstrap模式中工作

5 个答案: