我的Bootstrap模式锚不是从一个菜单(导航栏)的行项目内工作

My Bootstrap Modal ANCHOR is not working from within a line item of a menu (navbar)

本文关键字:导航 菜单 工作 项目 一个 模式 Bootstrap 我的      更新时间:2023-09-26

这是我的导航条代码:

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

是否有一个原因,为什么我的锚不会从导航条内工作?

是否有另一种方式,我可以写这个,使我的模态出现?

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

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

如果需要更多我的代码,请让我知道。

不可能通过href anchor在另一个页面中触发一个模态。你可以在modalexample.html中加入一段javascript代码,在页面加载时触发模态:

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