我有一个充满服务器名称的表格。当我单击该链接时,它会转到一个页面,其中包含有关该服务器的各种信息。我使用 SSO 来确定用户是否能够通过带有可选项目的保管箱更改某些字段。这一切都很好......作为一个页面
但是,我想将该页面转换为模式。我的模态工作正常,它会提取所有信息...但是,下拉框只能每隔一次工作。毫不夸张,每隔一段时间。我单击服务器,模式出现,下拉列表中没有值。我可以用 firebug 检查它,并看到它在下拉列表中具有值,但没有任何反应。我关闭模式,单击链接(相同或不同),下拉菜单工作得很好
这是我的html
<td><a href="{{ url_for('vm', vm=vm.GuestName) }}" data-keyboard="false" data-target="#vmModal" data-toggle="modal"> {{ vm.GuestName }}</a></td>
这是我的模式
<div class="modal hide fade in" id="vmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Virtual Machine Info</h3>
</div>
<div class="modal-body" style="height: 600px; right: 12px">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div><!-- /.modal -->
这是我的下拉菜单
{% if access %}
<div class="dropdown">
<li>
<strong>Service:</strong>
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> {{ item.Service }} <b
class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
{% for service in service_data %}
<li><a tabindex="-1"
href="/api?name={{ item.GuestName }}&service={{ service.name }}"> {{ service.name }}</a>
</li>
{% endfor %}
</ul>
</li>
</div>
最佳答案
我刚刚解决了一个非常类似的问题,我的模态对话框导致下拉菜单仅在我每次打开模态对话框时才起作用。下拉菜单最初可以使用。但如果我打开并关闭模式,它就会停止工作。然后,如果我打开模式并再次关闭它,下拉菜单将再次工作。问题很简单,包含模态内容的目标 url 正在引用 bootstrap.js 文件,而该文件已在父页面中引用。因此,我所要做的就是从模态内容页面中删除以下内容:
<script src="../js/bootstrap.min.js"></script>
编辑:实际上,当我从模式内容页面中删除它时,其他元素停止工作,所以我将其添加回来。相反,我将其添加了两次,一次在页面顶部,另一次在页面底部标签之前。现在每次都有效。我不明白。还有其他人知道为什么会发生这种情况吗?
Fabrice G,我尝试了你推荐的方法,但我无法让它以这种方式工作。我一定有不同的问题。
关于javascript - Bootstrap 下拉菜单部分在模式下工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19137995/