如何仅使html的一部分“可粘贴”？ （模式对话框）

Question

我有一个Angular App和一个自定义的Modal Dialog实现。如何限制页面的“ tabbablity”，以便我只能通过模式查看选项卡，而不能在后台查看其他所有内容？

我已经为body标记正下方的所有其他元素设置了aria-hidden="true"，并认为必须解决这个问题，但没有成功。 tabindex="-1"也不起作用。

实际上，我想要此引导程序模式的确切选项卡行为： https://getbootstrap.com/docs/4.0/components/modal/

点击：“启动演示模态”，然后选择模态元素。

我该如何实现？

编辑：我看一下引导程序模式，它们没有为其他元素设置任何内容，而只是为模式容器div（带有class="modal fade show"）tabindex="-1"设置了任何内容。在模态中的最后一个元素之后，选项卡集将焦点放在此模态容器div上。之后，焦点再次设置为第一个模态元素。在我的情况下，tabindex="-1"奇怪地没有带任何东西，在最后一个元素焦点跳转到浏览器的URL输入字段并继续进行之后。

Answer 1

我不知道您拥有什么代码...但是此tabindex行为在bootstarp示例中很好用。

.modal-backdrop {
   background-color: transparent !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal (with tab only on modal elements)
</button>

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

<br><br><br>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
  Launch demo modal (with tab on all document elements)
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal2" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">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">
        coucou
      </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>