When Modal Overlays are layered, only bottom layer has a dark background (fix #4808)

js/components/modalOverlay.js

@@ -9,7 +9,39 @@ const ImmutableComponent = require('./immutableComponent')
  * Represents a modal overlay
  */
 
+var globalInstanceCounter = 0
+var mountedInstances = []
+
 class ModalOverlay extends ImmutableComponent {
+
+  componentWillMount () {
+    this.instanceId = globalInstanceCounter++
+
+    this.setState({last: true})
+
+    if (mountedInstances.length) {
+      let lastModal = mountedInstances[mountedInstances.length - 1]
+      lastModal.setState({last: false})
+      lastModal.forceUpdate()
+    }
+
+    mountedInstances.push(this)
+  }
+
+  componentWillUnmount () {
+    let instId = this.instanceId
+
+    mountedInstances = mountedInstances.filter(function (inst) {
+      return inst.instanceId !== instId
+    })
+
+    if (mountedInstances.length) {
+      let lastModal = mountedInstances[mountedInstances.length - 1]
+      lastModal.setState({last: true})
+      lastModal.forceUpdate()
+    }
+  }
+
   get dialogContent () {
     var close = null
     var button = null
@@ -35,7 +67,7 @@ class ModalOverlay extends ImmutableComponent {
   }
 
   render () {
-    return <div className='modal fade' role='alert'>
+    return <div className={'modal fade' + (this.state.last ? ' last' : '') + (this.props.transparentBackground ? ' transparentBackground' : '')} role='alert'>
       {this.dialogContent}
     </div>
   }

less/modalOverlay.less

@@ -4,19 +4,31 @@
 
 @import "variables.less";
 
+.modal.last + .modal.last {
+  background: transparent;
+}
+
 .modal {
   opacity: 1;
   overflow: auto;
   position: fixed;
-  background: @black25;
+  background: transparent;
   width: 100vw;
   height: 100vh;
   left: 0;
   top: 0;
   z-index: 8999;
 
-  &.fade {
-    transition: @transitionFast;
+  +.modal {
+    background: transparent;
+  }
+
+  &.last {
+    background: @black25;
+
+    &.transparentBackground {
+      background: transparent;
+    }
   }
 
   &.hidden {
@@ -25,8 +37,6 @@
   }
 
   .modal {
-    background: transparent;
-
     .dialog {
       left: 0;
       top: 0;