Ver código fonte

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

Artur Paikin 9 anos atrás
pai
commit
8b1a5741d0
2 arquivos alterados com 8 adições e 4 exclusões
  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
     modal.isHidden = true
     this.core.setState({modal: modal})
     this.core.setState({modal: modal})
 
 
-    document.body.style.overflow = 'visible'
+    document.body.classList.remove('is-UppyModal-open')
   }
   }
 
 
   showModal () {
   showModal () {
-    // this.core.emitter.emit('modal-open')
-
     const modal = this.core.getState().modal
     const modal = this.core.getState().modal
     modal.isHidden = false
     modal.isHidden = false
 
 
@@ -103,7 +101,7 @@ export default class Modal extends Plugin {
 
 
     this.core.setState({modal: modal})
     this.core.setState({modal: modal})
 
 
-    document.body.style.overflow = 'hidden'
+    document.body.classList.add('is-UppyModal-open')
   }
   }
 
 
   events () {
   events () {

+ 6 - 0
src/scss/_modal.scss

@@ -6,6 +6,12 @@
   z-index: $zIndex-2;
   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] {
 .UppyModal[aria-hidden=true] {
   display: none;
   display: none;
 }
 }