Bootstrap typeahead 在 Bootstrap 模式中不起作用答案

【问题标题】：Bootstrap typeahead not Working inside the Bootstrap ModalBootstrap typeahead 在 Bootstrap 模式中不起作用
【发布时间】：2012-04-19 02:31:39
【问题描述】：

我正在使用 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">&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>

【问题讨论】：

标签： twitter-bootstrap bootstrap-typeahead

【解决方案1】：

您需要在 .typeahead 上放置一个 1051 的 z-index 以使其显示在模态 div 上方。

【讨论】：

感谢您的帮助，但似乎将 z-index 设置为 1051 不起作用。我认为当我将其放入模式中时，我为 typeahead 制作的 javascript 不会包含在 DOM 中。谁能帮助我。请..我正在使用codeigniter和twitter bootstrap。
预输入插入到模态区域外的dom中，并显示在模态下方。我可以通过添加 .typeahead { z-index: 1051; } 进入 bootstrap.css。这与处理模式中未显示的下拉菜单相同的技巧 (github.com/twitter/bootstrap/pull/1221)
+1 他们声称问题出在最新版本中。但它不是。我在使用 bootstrap 2.1.1 时仍然遇到同样的问题。
我使用的是 2.2.1，但问题仍然存在
由于单独调整 z-index 可能无法修复它，因此可能值得注意的是根据以下问题在 .modal-body 上包含 overflow-y: visible 属性：stackoverflow.com/questions/13768382/…

【解决方案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

【讨论】：

【解决方案3】：

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

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

发现于https://github.com/twbs/bootstrap/issues/1078，由 jgutix 回答

【讨论】：

【解决方案4】：

确保删除 typeahead-append-to-body="true"

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

【讨论】：

【解决方案5】：

我在我的自定义 css 中使用以下

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

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

working example of use

【讨论】：