来自下拉菜单项的模态

Question

我正试图从bootstrap beta 4.0中的下拉菜单项中创建一个模式。它似乎不起作用。我在页面上的其他modals上使用了相同的格式，它们正在工作。

         <li class="nav-item dropdown">
        <a href="#insurance-head-section" class="nav-link dropdown-toggle" data-toggle="dropdown">Insurance</a>
        <div class="dropdown-menu">
          <a href="" class="dropdown-item">New Patient</a>
          <a href="" class="dropdown-item">Established Patient</a>
          <a href="#response"
          class="dropdown-item"
          data-toggle="modal" data-target="response">Responsibilities</a>
          <a href="" class="dropdown-item">link 4</a>
        </div>
      </li>

模式如下：

  <div class="modal" id="response">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title"></h5>
      <button class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body">
      <div class="list-group">
        <div class="d-flex w-100 justify-content-between">
          <h6>Responsibilities</h6>

        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 1

您的数据目标之前缺少哈希值

<a href="#response" class="dropdown-item" data-toggle="modal" data-target="#response">Responsibilities</a>

您将在他们的文档中看到这一点：

https://getbootstrap.com/docs/4.0/components/modal/#modal-组成部分

这里有一个链接到它工作的代码库：

https://codepen.io/egerrard/pen/jGzjOz