두 번째 모드를 닫은 후 포커스가 잘못됨

두 번째 모드를 닫은 후 포커스가 잘못됨

vue.js 2와 bootsrap 3을 사용하여 두 번째 모드를 엽니다.

며칠 전 두 번째 모달에 포함된 컨트롤에 초점을 맞추는 방법에 대한 질문을 했습니다.나는 그 문제를 해결하는 훌륭한 답을 얻었다.

문제 첫 번째 모듈을 열 때 사용자가 스크롤하여 아래쪽을 볼 수 있습니다.그러나 두 번째 모달 열기 및 닫기 후 포커스는 첫 번째 모달 포함 페이지로 이동합니다.그리고 사용자가 스크롤하여 다른 첫 번째 모달들을 볼 때 첫 번째 모달 뒤로 페이지를 스크롤합니다.

특히 모달의 크기가 화면 높이보다 클 때는 매우 사용하기 불편합니다.이걸 막을 방법이 있나요?

이 문제를 재현하려면 답변을 열고 "스니펫 확장"을 클릭하십시오.

저는 그게 좋습니다.

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

다음은 서브모달 종료 후 포커스를 원래 모달로 되돌리는 이전 답변의 수정 버전입니다.

변경사항은 다음과 같습니다.

$(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>

언급URL : https://stackoverflow.com/questions/46115830/wrong-focus-after-closing-a-2nd-modal