javascript - 我的 Bootstrap Modal ANCHOR 在菜单(导航栏)的行元素中不起作用

Question

这是我的导航栏代码:

<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav" id="menu">
<li><a href="/modalexample.html#theModal" data-toggle="modal">ex</a></li>
<li><a href="">Another Link here</a></li>
</ul>
</div>

这是我的“modalexample.html”页面中的模态代码

<div class="modal fade text-center" id="theModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button class="close" data-dismiss="modal">X</button>
<h1>Modal Example</h1>
</div>
<div class="modal-body"> Modal Information Here </div>
<div class="modal-footer"> Footer Stuff Here </div>
</div>
</div>
</div>

出于某种我不知道的原因，在单击页面链接 (/modalexample.html#theModal) 后我无法显示我的模式。

我的 anchor 在导航栏中不起作用是否有原因？

还有其他方法可以让我的模态出现吗？

注意:在这两个页面中，我都包含了 jquery-2.1.4.min.js 和 bootstrap.min.js(jquery 脚本位于 bootstrap 脚本之前)。

另外，我在两个页面的开头都包含了指向 bootstrap.css 样式表的链接。

如果需要我的更多代码，请告诉我。

Answer 1

不可能通过 href anchor 在另一个页面中触发模式。 您可以在 modalexample.html 中放置一个 javascript 代码以在加载页面时触发模式:

<script type="text/javascript">
    $(window).load(function(){
        $('#theModal').modal('show');
    });
</script>