试图打开一个下拉按钮,然后单击下拉列表中的一个项目时,它应该打开一个模式 - 但不起作用,添加了以下代码:
<button type="button" class="btn btn-lg btn-warning dropdown-toggle" data-toggle="dropdown">By industries <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#consumergoods">Consumer goods</a></li>
<div class="modal fade" id="consumergoods" data-target="#consumergoods">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header orange">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"><strong></strong>Consumer goods</h4>
</div>
可能做错了什么,但如果有人可以提供帮助,我会很高兴,谢谢!
最佳答案
你需要有一个包装 div .dropdown
对于button
和 <ul>
为了使下拉菜单和模态框起作用,您需要提供属性 data-toggle="modal"
到链接
<div class="dropdown">
<button type="button" class="btn btn-lg btn-warning dropdown-toggle" data-toggle="dropdown">By industries <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#consumergoods" data-toggle="modal">Consumer goods</a></li>
</ul>
</div>
<div class="modal fade" id="consumergoods" data-target="#consumergoods">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header orange">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title"><strong></strong>Consumer goods</h4>
</div>
</div>
</div>
</div>
Fiddle
关于twitter-bootstrap - Twitter Bootstrap 下拉菜单,打开模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28720843/