从导航栏打开一个模态窗口

Question

我试图从导航栏打开一个模态窗口。我已经遵循了一些好的教程，当我按下链接时，模态窗口打开了，但问题是模态窗口看起来有些不可编辑，甚至无法关闭模态窗口中的X。在导航栏外部同样运行良好。

我想知道为什么会出现这种情况。

我的代码如下：

<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">&times;</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>

截图：

- optimus

---

只是一个想法。Bootstrap有一个专门用于导航栏的组件对齐方式。不要使用pull-right，改为navbar-right。使用.navbar-left或.navbar-right实用程序类来对齐导航链接、表单、按钮或文本。这两个类都会在指定方向上添加CSS浮动。例如，要对齐导航链接，请将它们放在具有相应实用程序类的单独的<ul>中。 这些类是.pull-left和.pull-right的mixin版本，但它们被限定在媒体查询中，以便更轻松地处理跨设备尺寸的导航栏组件。http://getbootstrap.com/components/#navbar - DivineChef

Answer 1

这在官方文档中有说明：

模态框标记的放置

始终尝试将模态框的HTML代码放置在文档的顶层位置，以避免其他组件影响模态框的外观和/或功能。

将具有modal类的

放在导航栏之外。您可以将触发模态框的保留在导航栏内。

- cvrebert

Answer 2

<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>[e-mail]</strong>>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss = "modal">Close</button>
            </div>
        </div>
    </div>
</div>

- Masood Ahmad

Answer 3

我遇到了同样的问题。唯一解决方法是在导航栏中添加一个jQuery点击事件，以覆盖bootstrap默认行为。代码如下：

$("#navbar_register_btn").on("click",function(e){
    e.preventDefault();
    $('#basicModal').modal('show');
})

在这种情况下，您需要为导航栏中的链接命名一个id为“navbar_register_btn”。

- RiaanP

Answer 4

  <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">&times;</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>

- Dreyyy