From f0b3115be169e26512714e9643bb74ea85dd745e Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 23 Nov 2018 21:33:03 -0800
Subject: [PATCH] fix(scrolling): fix body scrollable when modal is open (#681)
Fixes #680
---
routes/_components/dialog/components/ModalDialog.html | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/routes/_components/dialog/components/ModalDialog.html b/routes/_components/dialog/components/ModalDialog.html
index 99dcfc57..a3336078 100644
--- a/routes/_components/dialog/components/ModalDialog.html
+++ b/routes/_components/dialog/components/ModalDialog.html
@@ -120,6 +120,9 @@
.muted-style.modal-dialog-contents {
border: none;
}
+ :global(body.modal-open) {
+ overflow-y: hidden;
+ }
</style>
<script>
import { A11yDialog } from '../../../_thirdparty/a11y-dialog/a11y-dialog'
@@ -132,6 +135,7 @@
this._a11yDialog = new A11yDialog(dialogElement)
this._a11yDialog.on('hide', () => {
let { id } = this.get()
+ document.body.classList.toggle('modal-open', false)
this.fire('close')
this._a11yDialog.destroy()
emit('destroyDialog', id)
@@ -172,6 +176,7 @@
if (id !== thisId) {
return
}
+ document.body.classList.toggle('modal-open', true)
this._a11yDialog.show()
requestAnimationFrame(() => {
this.set({ fadedIn: true })