Browse Source

`is-UppyModal-open` class instead of inline styles

Artur Paikin 9 years ago
parent
commit
8b1a5741d0
2 changed files with 8 additions and 4 deletions
  1. 2 4
      src/plugins/Modal.js
  2. 6 0
      src/scss/_modal.scss

+ 2 - 4
src/plugins/Modal.js

@@ -84,12 +84,10 @@ export default class Modal extends Plugin {
     modal.isHidden = true
     this.core.setState({modal: modal})
 
-    document.body.style.overflow = 'visible'
+    document.body.classList.remove('is-UppyModal-open')
   }
 
   showModal () {
-    // this.core.emitter.emit('modal-open')
-
     const modal = this.core.getState().modal
     modal.isHidden = false
 
@@ -103,7 +101,7 @@ export default class Modal extends Plugin {
 
     this.core.setState({modal: modal})
 
-    document.body.style.overflow = 'hidden'
+    document.body.classList.add('is-UppyModal-open')
   }
 
   events () {

+ 6 - 0
src/scss/_modal.scss

@@ -6,6 +6,12 @@
   z-index: $zIndex-2;
 }
 
+// Added to body to prevent the page from scrolling when Modal is open
+.is-UppyModal-open {
+  overflow: hidden;
+}
+
+
 .UppyModal[aria-hidden=true] {
   display: none;
 }