body overflow hidden when opening modal

Link1515 · Oct 14, 2024 · be80caa · be80caa
1 parent 7ddddb1
commit be80caa
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
@@ -6,10 +6,12 @@ const modal = ref();
 
 const openModal = () => {
   modal.value.classList.add('is-active');
+  document.body.style.overflow = 'hidden';
 };
 
 const closeModal = () => {
   setTimeout(() => modal.value.classList.remove('is-active'), 300);
+  document.body.style.overflow = '';
 };
 
 watch(isOpen, () => {

diff --git a/src/style.css b/src/style.css
@@ -1,5 +1,10 @@
 @import 'bulma/css/bulma.min.css';
 
+body {
+  height: 100vh;
+  height: 100dvh;
+}
+
 .bounce-enter-active {
   animation: bounce-in 0.5s;
 }