如何仅使html的一部分“可粘贴”?(模式对话框)

阿卡索伊

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

我已经aria-hidden="true"在body标签下直接设置了所有其他元素,并认为必须处理该问题,但没有成功。tabindex="-1"也没有用..

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

单击:“启动演示模态”,然后选择模态元素。

我该如何实现?

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

卡米尔

我不知道您拥有什么代码...但是此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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章