本稿について
本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
#vue
Nuxtで作成したページで、fullscreenのmodalを表示させている状態でブラウザバックなどで遷移すると、modalの領域が残ってしまっていて、画面スクロールができないという問題が発生した。
modalはcomponent上で実装されている。
components/Modal.vue
<template>
<div refs="modalWindow" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
...
</div>
</template>
単純に modalを
hide すればOKかと思ったが bodyに modal-open というclassが残ってしまっているのを確認した。また、別の記事で
.modal-backdrop のDOMも削除していたのでこれも削除するようにした。本当は
Vue-router の beforeRouteUpdate などを使えると綺麗だったのかもしれなかったが、Nuxtだとうまく使えなかった(これについては別途調べる)
そのため
beforeDestroy を利用して実現した。beforeDestroy() {
// モーダルを表示して画面遷移するとmodalがdomに残ってしまうので削除する
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
$(this.$refs.modalWindow).modal('hide')
},