Ответ 1
Вам нужно поставить z-индекс 1051 на .typeahead, чтобы он появился над модальным div.
Я использую фреймворк codeigniter, и я использую bootstrap typeahead, и все в порядке, но моя проблема в том, что когда я помещаю его в bootstrap modal, 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 я вызываю view_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">×</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>
Вам нужно поставить z-индекс 1051 на .typeahead, чтобы он появился над модальным div.
Изменить bootstrap-typeahead.js
:
this.$menu.css({
top: pos.top + pos.height,
left: pos.left,
'z-index': 9999 //maximum z-index
})
Найдите самый высокий индекс z: 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;
}