Question

我正在尝试从bootstrap beta 4.0中的下拉菜单项执行模式。它似乎没有工作。我在页面上的其他模态上使用了相同的格式，它们正在工作。

         <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

您在data-target

之前缺少哈希值

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

您将在此处的文档中看到这一点：

https://getbootstrap.com/docs/4.0/components/modal/#modal-components

这是一个指向它工作的codepen的链接：

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

下拉菜单项中的模态

1 个答案: