Bootstrap typeahead not Bootstrap Modal内工作

我使用codeigniter框架，我使用引导typeahead和一切都很好，但我的问题是，当我把它放在bootstrap模式的bootstrap typeahead将无法正常工作。有人能帮我吗？请。这是我的代码Bootstrap typeahead not Bootstrap Modal内工作

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

来源

2012-04-19 user1342825

您需要在.typeahead上放置一个1051的z索引以使其出现在模态div上方。

来源

2012-04-19 13:25:21 WebCloud

感谢您的帮助，但它似乎的z-index设置为1051不能正常工作。我认为当我将它放入模式中时，我为typeahead所做的JavaScript将不会包含在DOM中。任何人都可以帮助我。请使用codeigniter和twitter bootstrap。 – user1342825 2012-04-23 10:09:58

键入头插入到模态区域外的dom中，并显示在模态下方。我能够通过添加.typeahead {z-index：1051; }到bootstrap.css中。这与处理未在模式中显示的下拉菜单的技巧相同（https://github.com/twitter/bootstrap/pull/1221） – deafgreatdane 2012-05-29 12:47:37

+1他们声称问题已在最新版本中。但不是。我仍然遇到与bootstrap 2.1.1相同的问题。 – Houman 2012-09-11 18:07:59

编辑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

来源

2012-05-19 05:07:30 ntvy

+1。 9999不工作。 zIndex 1051适合我。 – 2012-11-29 22:50:07

，如果我遇到一个特定版本的问题，这是略有不同的，我不知道，但我使用bootstrap 2.3.2并没有z-index版本在为我工作。我发现了另一个解决方案，结束了工作：

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

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

来源

2013-10-22 16:17:18 jdmcnair

谢谢！有用！ – Yaron 2017-07-16 11:24:27

确保删除预输入，追加到身体=“真”

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

来源

2015-02-18 08:34:00 user3414799

谢谢，这实际上在引导3上工作 – alsafoo 2015-02-24 18:03:51

我正在使用我的自定义CSS以下

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

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

working example of use

来源

2015-05-20 14:04:58 Mike

Bootstrap typeahead not Bootstrap Modal内工作

回答

相关问题