关闭第二个模态后焦点错误

Posted 2023-02-23

【中文标题】关闭第二个模态后焦点错误

【英文标题】：Wrong focus after closing a 2nd modal

【发布时间】：2018-02-17 08:12:21

【问题描述】：

我正在使用 vue.js 2 和 bootsrap 3 打开一个打开第二个模态的模态。

几天前，我问了一个关于如何将焦点设置在第二个模式中包含的控件的问题。我有一个很棒的answer 解决了这个问题。

问题 当打开第一个模式时，用户可以滚动查看它的底部。但是在打开和关闭第二个模态之后，焦点移动到包含第一个模态的页面。当用户滚动查看第一个模态的其余部分时，他会滚动第一个模态后面的页面。

使用起来非常不舒服，尤其是当模态大于屏幕高度时。有没有办法防止这种情况发生？

要重现此问题，请打开 answer 并单击“展开 sn-p”

【参考方案1】：

这对我有用：

$('#my-modal').on('hidden.bs.modal', function () 
        $('body').addClass('modal-open');
    );

【参考方案2】：

这是上一个答案的修改版本，在子模态关闭后将焦点设置回原始模态。

变化就在这里：

$(this.$refs.submodal.$el).on("hidden.bs.modal", this.onShown)

这是在mounted 处理程序中添加的。它将处理程序添加到子模式的hidden.bs.modal 事件。当组件被销毁时，它也会移除处理程序。

此外，因为关闭模式会删除在模式打开时分配给主体的 modal-open 类，所以下面的代码会在每次调用 onShown 时将该类添加到主体中，这样滚动不会受到影响父模态。

$("body").addClass("modal-open")

这是一个工作示例。

console.clear()

Vue.component("sub-modal", 
  template: "#submodal",
  methods: 
    show() 
      $(this.$el).modal("show")
    ,
    onShown(event) 
      console.log("submodal onshown")
      this.$refs.input.focus()
    
  ,
  mounted() 
   $(this.$el).on("shown.bs.modal", this.onShown)
  ,
  beforeDestroy() 
    $(this.$el).off("shown.bs.modal", this.onShown)
  
)

Vue.component("modal", 
  template: "#modal",
  methods: 
    show() 
      $(this.$refs.modal).modal("show")
    ,
    showSubModal() 
      this.$refs.submodal.show()
    ,
    onShown(event) 
      console.log("parent")
      this.$refs.input.focus()
      // Add the "modal-open" class back to the body in case
      // it was removed by the sub modal
      $("body").addClass("modal-open")
    
  ,
  mounted() 
    $(this.$refs.modal).on("shown.bs.modal", this.onShown)
    $(this.$refs.submodal.$el).on("hidden.bs.modal", this.onShown)
  ,
  beforeDestroy() 
    $(this.$refs.modal).off("shown.bs.modal", this.onShown)
    $(this.$refs.submodal.$el).on("hidden.bs.modal", this.onShown)
  
)

new Vue(
  el: "#app",
)

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="app">
  <modal ref="modal"></modal>
  <button @click="$refs.modal.show()" class="btn">Show Modal</button>
</div>

<template id="submodal">
  <div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body">
          <input ref="input" type="text" class="form-control">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

</template>

<template id="modal">
  <div>
    <div ref="modal" class="modal fade" tabindex="-1" role="dialog">

      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>
          <div class="modal-body" style="height: 80vh">
            Stuff
            <input ref="input" type="text" class="form-control">
          </div>
          <div class="modal-footer">
            <button @click="showSubModal" type="button" class="btn btn-primary">Show Sub Modal</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <sub-modal ref="submodal"></sub-modal>
  </div>
</template>

【讨论】：

不幸的是，问题仍然存在。正如您在这里看到的imgur.com/1D2CWwp，关闭#submodal 后#modal 的滚动条消失了。然后您无法向上滚动查看#modal

的顶部

@Warrio 现在检查一下，它应该可以工作。一般来说，我认为从另一个模态打开一个模态是一个坏主意，但这应该能让你到达那里。

@Warrio 在关于modal-open的示例之前添加了一些文本。