Merge pull request ethereum#1066 from ethereum/fixModalDialog

Fix modal dialog
KennethAshley · Feb 12, 2018 · 343ef25 · 343ef25
2 parents 168d44c + a2c676d
commit 343ef25
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/src/app/ui/modaldialog.js b/src/app/ui/modaldialog.js
@@ -39,6 +39,15 @@ module.exports = (title, content, ok, cancel) => {
     if (cancel && cancel.fn) cancel.fn()
   }
 
+  function modalKeyEvent (e) {
+    if (e.keyCode === 27) {
+      cancelListener()
+    } else if (e.keyCode === 13) {
+      e.preventDefault()
+      okListener()
+    }
+  }
+
   function hide () {
     container.style.display = 'none'
   }
@@ -51,14 +60,19 @@ module.exports = (title, content, ok, cancel) => {
     okDiv.removeEventListener('click', okListener)
     cancelDiv.removeEventListener('click', cancelListener)
     closeDiv.removeEventListener('click', cancelListener)
+    document.removeEventListener('keydown', modalKeyEvent)
+    document.getElementById('modal-background').removeEventListener('click', cancelListener)
   }
   okDiv.addEventListener('click', okListener)
   cancelDiv.addEventListener('click', cancelListener)
   closeDiv.addEventListener('click', cancelListener)
+  document.addEventListener('keydown', modalKeyEvent)
+  document.getElementById('modal-background').addEventListener('click', cancelListener)
 }
 
 function html () {
   return yo`<div id="modal-dialog" class="${css.modal}">
+  <div id="modal-background" class="${css['modalBackground']}"> </div>
   <div class="${css['modalContent']}">
     <div class="${css['modalHeader']}">
     <h2></h2>
@@ -70,6 +84,5 @@ function html () {
     <span id="modal-footer-ok" class=${css['modalFooterOk']}>OK</span><span id="modal-footer-cancel"  class=${css['modalFooterCancel']}>Cancel</span>
         </div>
   </div>
-  </div>
   </div>`
 }
diff --git a/src/app/ui/styles/modaldialog-styles.js b/src/app/ui/styles/modaldialog-styles.js
@@ -73,6 +73,12 @@ var css = csjs`
     color: ${styles.remix.modalDialog_Header_Footer_Color};
     cursor: pointer;
   }
+  .modalBackground {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top:0;
+  }
   @-webkit-keyframes animatetop {
     from {top: -300px; opacity: 0}
     to {top: 0; opacity: 1}