updating modaldialog.js, adding modal-dialog-custom.js - but it has a problem where the cancel inside of modal-dialog-custom.js is loading and removing the cancel button.

src/app/modal-dialog-custom.js

@@ -0,0 +1,9 @@
+var modal = require('./modaldialog.js')
+var yo = require('yo-yo')
+module.exports = {
+  alert: function (text) {
+    modal('', yo`<div>${text}</div>`, null, null)
+    var cancel = document.getElementById('modal-footer-cancel')
+      cancel.style.display = 'none'
+  }
+}

src/app/modaldialog.js

@@ -1,28 +1,114 @@
+var yo = require('yo-yo')
+var csjs = require('csjs-inject')
+
+var css = csjs`
+  .modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1000; /* Sit on top of everything including the dragbar */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+  .modalHeader {
+    padding: 2px 16px;
+    background-color: orange;
+    color: white;
+  }
+  .modalBody {
+    padding: 1.5em;
+    line-height: 1.5em;
+  }
+  .modalFooter {
+    padding: 10px 30px;
+    background-color: orange;
+    color: white;
+    text-align: right;
+    font-weight: 700;
+    cursor: pointer;
+  }
+  .modalContent {
+    position: relative;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 0;
+    line-height: 18px;
+    font-size: 13px;
+    border: 1px solid #888;
+    width: 50%;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+    -webkit-animation-name: animatetop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animatetop;
+    animation-duration: 0.4s
+  }
+  .modalFooterOk {
+    cursor: pointer;
+  }
+  .modalFooterCancel {
+    cursor: pointer;
+  }
+  @-webkit-keyframes animatetop {
+    from {top: -300px; opacity: 0} 
+    to {top: 0; opacity: 1}
+  }
+  @keyframes animatetop {
+    from {top: -300px; opacity: 0}
+    to {top: 0; opacity: 1}
+  }
+`
+
 module.exports = (title, content, ok, cancel) => {
+  var containerOrig = document.querySelector('.modal')
+  var container
+  if (!containerOrig) {
+    container = document.querySelector(`.${css.modal}`)
+    if (!container) {
+      document.querySelector('body').appendChild(html())
+      container = document.querySelector(`.${css.modal}`)
+    }
+  } else {
+    var parent = document.querySelector('body')
+    var child = document.getElementById('modaldialog')
+    parent.removeChild(child)
+    document.querySelector('body').appendChild(html())
+    container = document.querySelector(`.${css.modal}`)
+  }
+
   var okDiv = document.getElementById('modal-footer-ok')
-  var cancelDiv = document.getElementById('modal-footer-cancel')
   okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK'
+
+  var cancelDiv = document.getElementById('modal-footer-cancel')
   cancelDiv.innerHTML = (cancel && cancel.label !== undefined) ? cancel.label : 'Cancel'
 
-  var modal = document.querySelector('.modal-body')
-  var modaltitle = document.querySelector('.modal-header h2')
+  var modal = document.querySelector(`.${css.modalBody}`)
+  var modalTitle = document.querySelector(`.${css.modalHeader} h2`)
+  var modalFooter = document.querySelector(`.${css.modalFooter}`)
 
-  modaltitle.innerHTML = ' - '
-  if (title) modaltitle.innerHTML = title
+  modalTitle.innerHTML = ''
+  if (title) modalTitle.innerHTML = title
 
   modal.innerHTML = ''
   if (content) modal.appendChild(content)
 
-  var container = document.querySelector('.modal')
   container.style.display = container.style.display === 'block' ? hide() : show()
 
-  function okListenner () {
+  function clickModalFooterListener (event) {
     hide()
-    if (ok && ok.fn) ok.fn()
     removeEventListener()
   }
 
-  function cancelListenner () {
+  function okListener () {
+    hide()
+    // if (ok && ok.fn) ok.fn() - what is ok.fn doing?
+    removeEventListener()
+  }
+
+  function cancelListener () {
     hide()
     if (cancel && cancel.fn) cancel.fn()
     removeEventListener()
@@ -37,10 +123,28 @@ module.exports = (title, content, ok, cancel) => {
   }
 
   function removeEventListener () {
-    okDiv.removeEventListener('click', okListenner)
-    cancelDiv.removeEventListener('click', cancelListenner)
+    okDiv.removeEventListener('click', okListener)
+    cancelDiv.removeEventListener('click', cancelListener)
+    modal.removeEventListener('click', clickModalFooterListener)
   }
 
-  okDiv.addEventListener('click', okListenner)
-  cancelDiv.addEventListener('click', cancelListenner)
+  okDiv.addEventListener('click', okListener)
+  cancelDiv.addEventListener('click', cancelListener)
+  modalFooter.addEventListener('click', clickModalFooterListener)
+}
+
+function html () {
+  return yo`<div id="modal-dialog" class="${css.modal}" onclick="clickModal()" >
+  <div class="${css['modalContent']}">
+    <div class="${css['modalHeader']}">
+    <h2></h2>
+  </div>
+  <div class="${css['modalBody']}"> - 
+  </div>
+  <div class="${css['modalFooter']}">
+    <span id="modal-footer-ok" class="modalFooterOk">OK</span><span id="modal-footer-cancel" class="modalFooterCancel">Cancel</span>
+        </div>
+  </div>
+  </div>
+  </div>`
 }