Html 从导航栏打开一个模态窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23685837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open an Modal window from Navigation bar
提问by optimus
I'm trying to open a modal window from navigation bar. I've followed some good tutorials and once I pressed my link a modal opened, problem is model window looks like not editable for some reason, can't even close the X in the modal window. The same works great outside the nav bar.
我正在尝试从导航栏打开一个模态窗口。我遵循了一些很好的教程，一旦我按下链接，模态打开，问题是模型窗口由于某种原因看起来不可编辑，甚至无法关闭模态窗口中的 X。在导航栏之外同样有效。
I would like to know why this happens.
我想知道为什么会发生这种情况。
My code is as follows:
我的代码如下：
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#" data-toggle="modal" data-target="#basicModal">Contact Us</a></li>
</ul>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
Screenshot:
截屏：
回答by cvrebert
This is covered in the official documentation:
Modal markup placement
Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
模态标记放置
始终尝试将模态的 HTML 代码放在文档中的顶级位置，以避免其他组件影响模态的外观和/或功能。
Put the <div>that has the modalclass outside of the navbar. You can leave the modal-triggering <a>in the navbar.
把<div>具有modal导航栏的类之外。您可以将模式触发<a>留在导航栏中。
回答by Masood Ahmad
<nav class="navbar bg-secondary">
<div
class="collapse navbar-collapse float-right" id="navcol-1" style="color:rgb(255,255,255);">
<ul class="nav navbar-nav ml-auto" role="navigation">
<li><a href="#myModal" data-toggle = "modal" data-target= "#myModal" class="nav-link">Contact us</a></li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">For your Queries</h5>
</div>
<div class="modal-body">
IF you have any questions, Mess Manager Office number is <strong>+01234567890</strong> or you can email us by <strong>[email protected]</strong>>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss = "modal">Close</button>
</div>
</div>
</div>
</div>
回答by RiaanP
I am experiencing this same issue. The only way I could fix it was by adding a jQuery click on the link in the navbar to override the bootstrap default. Like so:
我遇到了同样的问题。我可以修复它的唯一方法是在导航栏中的链接上添加一个 jQuery 单击以覆盖引导程序默认值。像这样：
$("#navbar_register_btn").on("click",function(e){
e.preventDefault();
$('#basicModal').modal('show');
})
You will need to give your link in the navbar an id of "navbar_register_btn" in this case.
在这种情况下，您需要在导航栏中为您的链接提供一个 ID 为“navbar_register_btn”。
回答by Dreyyy
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
