cybrespace
/
pinafore
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix(scrolling): fix body scrollable when modal is open (#681) 

Fixes #680
This commit is contained in:
Nolan Lawson 2018-11-23 21:33:03 -08:00 committed by GitHub
parent e3debcc5e1
commit f0b3115be1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
routes/_components/dialog/components/ModalDialog.html
View File

@ -120,6 +120,9 @@
.muted-style.modal-dialog-contents { .muted-style.modal-dialog-contents {
border: none; border: none;
} }
:global(body.modal-open) {
overflow-y: hidden;
}
</style> </style>
<script> <script>
import { A11yDialog } from '../../../_thirdparty/a11y-dialog/a11y-dialog' import { A11yDialog } from '../../../_thirdparty/a11y-dialog/a11y-dialog'
@ -132,6 +135,7 @@
this._a11yDialog = new A11yDialog(dialogElement) this._a11yDialog = new A11yDialog(dialogElement)
this._a11yDialog.on('hide', () => { this._a11yDialog.on('hide', () => {
let { id } = this.get() let { id } = this.get()
document.body.classList.toggle('modal-open', false)
this.fire('close') this.fire('close')
this._a11yDialog.destroy() this._a11yDialog.destroy()
emit('destroyDialog', id) emit('destroyDialog', id)
@ -172,6 +176,7 @@
if (id !== thisId) { if (id !== thisId) {
return return
} }
document.body.classList.toggle('modal-open', true)
this._a11yDialog.show() this._a11yDialog.show()
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.set({ fadedIn: true }) this.set({ fadedIn: true })