// Tiny library for presenting modal dialogs. Example usage:
/*
<div id="popup">
  Hello!
</div>

<script>
  Modal("<div>Hello!</div>").present()
</script>
*/

function Modal(element, clickToDismiss) {
  this.clickToDismiss = (clickToDismiss === undefined ? true:clickToDismiss);  // Allow clicking to dismiss by default

  // Construct a centered floating box
  this.elem = document.createElement("div");
  if (typeof element == "string") {
    this.elem.innerHTML = element;
  } else {
    this.elem.appendChild(element);
  }
  this.elem.className = "centered";

  this.backdrop = document.createElement("div");
  this.backdrop.className = "modal-background transparent-blur";

  this.backdrop.appendChild(this.elem);

  // Allow dismissing the modal with a click on the background
  this.backdrop.parent = this;
  this.backdrop.onclick = function(event) {
    if ((event.target.className.indexOf("modal-background") !== -1) &&
        this.parent.clickToDismiss) { // Clicking on modal content won't hide it, only clicking the background will.
      this.parent.close();
    }
  };

  // Expose API

  this.present = function() {
    document.body.appendChild(this.backdrop);
  };

  this.close = function () {
    document.body.removeChild(this.backdrop);
  };
}

@@ -195,16 +195,58 @@
 miss) %7B%0A
+  // Allow clicking to dismiss by default%0A
   this.c
@@ -297,17 +297,19 @@
 d ? true
-:
+ : 
 clickToD
@@ -320,49 +320,8 @@
 ss);
-  // Allow clicking to dismiss by default
 %0A%0A  
@@ -390,29 +390,29 @@
 eateElement(
-%22div%22
+'div'
 );%0A  if (typ
@@ -429,17 +429,18 @@
 t ==
- %22
+= '
 string
-%22
+'
 ) %7B%0A
@@ -553,17 +553,17 @@
 e = 
-%22
+'
 centered
 %22;%0A%0A
@@ -558,17 +558,17 @@
 centered
-%22
+'
 ;%0A%0A  thi
@@ -607,13 +607,13 @@
 ent(
-%22div%22
+'div'
 );%0A 
@@ -639,17 +639,17 @@
 sName = 
-%22
+'
 modal-ba
@@ -673,17 +673,17 @@
 ent-blur
-%22
+'
 ;%0A%0A  thi
@@ -832,35 +832,129 @@
 rop.
-onclick = function(event) %7B
+addEventListener('click', (event) =%3E %7B%0A    // Clicking on modal content won't hide it, only clicking the background will.
 %0A   
@@ -990,17 +990,17 @@
 indexOf(
-%22
+'
 modal-ba
@@ -1007,17 +1007,17 @@
 ckground
-%22
+'
 ) !== -1
@@ -1024,16 +1024,8 @@
 ) &&
-%0A       
  thi
@@ -1054,87 +1054,8 @@
 s) %7B
- // Clicking on modal content won't hide it, only clicking the background will.
 %0A   
@@ -1083,24 +1083,25 @@
 );%0A    %7D%0A  %7D
+)
 ;%0A%0A  // Expo
@@ -1129,24 +1129,15 @@
 t = 
-function() %7B%0A   
+() =%3E %7B
  doc
@@ -1178,15 +1178,12 @@
 op);
-%0A 
  %7D;%0A
-%0A
   th
@@ -1197,25 +1197,15 @@
 e = 
-function () %7B%0A   
+() =%3E %7B
  doc
@@ -1242,16 +1242,14 @@
 ckdrop);
-%0A 
  %7D;%0A%7D%0A

Update modals.js style