techinplanet staffAsked By: Anonymous
Clicking on the image brings up a long, scrolling modal. The problem is that if you scrolling in the modal will also scroll the back of the modal. How do you solve it?
Modal is a component. Here is my code:
Carousel.vue
<template>_x000D_
<div>_x000D_
<div v-for="(item, index) in photos" :key="index">_x000D_
<div @click="imgClick(item)" style="cursor:pointer;">_x000D_
<img :src="item.thumbnail" />_x000D_
</div>_x000D_
<Modal v-if='item.show' @close="item.show = false">_x000D_
<div slot='body'>_x000D_
<img :src="item.thumbnail" :class="`img-index--${index}`"/>_x000D_
</div> _x000D_
</Modal>_x000D_
</div>_x000D_
</div>_x000D_
</template>_x000D_
_x000D_
<script>_x000D_
import Modal from './Modal.vue'_x000D_
export default {_x000D_
props: {_x000D_
items: { type: Array, default: () => [] }_x000D_
},_x000D_
data() {_x000D_
return {_x000D_
photos: {}_x000D_
}_x000D_
},_x000D_
created() {_x000D_
this.photos = this.items.map(item => {_x000D_
return { ...item, show: false }_x000D_
})_x000D_
},_x000D_
methods: {_x000D_
imgClick(item) {_x000D_
item.show = true_x000D_
}_x000D_
},_x000D_
components: {_x000D_
Modal: Modal_x000D_
}_x000D_
}_x000D_
</script>_x000D_
_x000D_
x000D
Solution
Answered By: Anonymous
Most modal packages solve this by applying a class to the <body> tag when a modal is opened. For example, <body class="modal-open">. Then in your application’s CSS, you can add this rule:
body.modal-open {
overflow: hidden;
}
This will make it so that the page behind the modal is no longer scrollable.
Whichever modal package you are using likely fires events when the modal is opened or closed. You can apply this class to the <body> tag in the open event handler, and remove the class from the <body> tag in the close event handler.
UPDATE
Based on the code you added, here’s how you can toggle the modal-open class on the <body> tag:
...
<div @click="showModal(item)" style="cursor:pointer;">
<img :src="item.thumbnail" />
</div>
<Modal v-if='item.show' @close="hideModal(item)">
<div slot='body'>
<img :src="item.thumbnail" :class="`img-index--${index}`"/>
</div>
</Modal>
...
{
...
methods: {
showModal(item) {
item.show = true
document.body.classList.add("modal-open");
},
hideModal(item) {
item.show = false;
document.body.classList.remove("modal-open");
}
},
...
}
See this jsFiddle for reference.
