When I close my bootstrap vue modal it causes a page jump to the section that has the open modal triggers which is fine. In Safari it is jumping well above the section where the triggers are. Is there a way to add a prevent default or similiar that will stop the page jumping when the modal is closed?
<template>
<b-modal
:visible="visible"
size="lg"
centered
@hidden="closeModal"
hide-footer
>
<p>
modal body
</p>
<template>
<div class="w-100">
<b-button
class="btn btn-icon"
@click.prevent="closeModal"
>
<span class="l-btn float-left">
<span class="btn-text">Cancel</span>
<i class="btn-icon-symbol"></i>
</span>
</b-button>
<a
:href="$store.state.modals.interstitial.href"
target="_blank"
class="btn btn-icon btn-icon-arrow"
>
<span class="l-btn float-left">
<span class="btn-text text-white">OK</span>
<i class="btn-icon-symbol text-white"></i>
</span>
</a>
</div>
</template>
</b-modal>
</template>
<script>
import { BButton } from 'bootstrap-vue';
export default {
name: 'Modal',
components: {
'b-button': BButton,
},
computed: {
visible() {
return this.$store.state.modals.interstitial.show;
},
},
methods: {
closeModal() {
this.$store.commit('modals/setShowModal', false);
this.$store.commit('modals/setModalHref', '');
},
},
};
</script>