导航栏中的模态框未打开

Question

我正在使用 Vue 和 Bootstrap 4 创建一个具有模式子组件的导航栏。该模式位于菜单下拉菜单中。当我单击模式时，屏幕会淡出，但我看不到模式。 这就是它的样子

我知道这个问题很多年前就已经被问过（就像 2012 年的这个问题）。我尝试过更改 z-index、删除背景褪色和颜色以及固定顶部导航，但这些都不起作用。任何对此的帮助将不胜感激！

导航栏：

<div class="app">  
    <!-- Navbar -->
    <nav class="navbar fixed-top navbar-expand-md navbar-dark bg-info">
    
      <!-- Collapse Toggle -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
      </button>
    
      <!-- Actions & Info -->
      <div class="navbar-collapse collapse" id="collapsingNavbar">
        <ul class="navbar-nav">         
          <li class="nav-item dropdown">
            <span class="nav-bar-media-text-size">
              <a class="nav-link dropdown-toggle active" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                Actions & Info
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item">
                  <AddRecipe />
                </a>             
              </div>
            </span>
          </li>
        </ul>
      </div>      
    </nav>
</div>

模态组件：

  <div>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-link" data-toggle="modal" data-target="#addCocktailModal">
      Add Cocktail
    </button>

    <!-- Modal -->
    <div class="modal fade" id="addCocktailModal" tabindex="-1" aria-labelledby="addCocktailModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addCocktailModalLabel">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>
  </div>

<script>
  import AddRecipe from '../components/AddRecipe.vue';

  export default {
    components: {
      AddRecipe,
    },
</script>

我将模式移到下拉列表之外。模式终于可见了，但我无法与它交互。

该模式在导航栏之外工作正常，但我希望它位于下拉菜单的导航栏中。

Answer 1

您可以在导航栏中使用打开模态框的按钮，而无需将模态框本身放在导航栏中。

将模态组件拆分为 2 个组件：一个提供按钮，另一个提供模态。

将按钮放在导航栏内，将模态框放在外面！