Fix modal closing in the hackiest way ever

css/scratchx.css

@@ -741,19 +741,7 @@ picture {
   transition: opacity 0.25s ease;
   border-radius: 5px;
   padding: 1.5em;
-  position: relative;
-  max-width: 60em;
-  margin-left: auto;
-  margin-right: auto; }
-  .modal .modal-inner::after {
-    clear: both;
-    content: "";
-    display: table; }
-  .modal .modal-inner .modal-content {
-    color: #58595b;
-    -webkit-columns: 2 8em;
-    -moz-columns: 2 8em;
-    columns: 2 8em; }
+  position: relative; }
   .modal .modal-inner a.cta {
     color: white;
     display: inline-block;
@@ -1028,15 +1016,31 @@ body > section {
 body #home {
   display: block; }
 
-.modal dialog {
-  width: 50%; }
-  .modal dialog:not(:only-child) {
-    float: left;
-    display: block;
-    margin-right: 2.53165%;
-    width: 48.73418%; }
-    .modal dialog:not(:only-child):last-child {
-      margin-right: 0; }
+.modal.n-children-1 dialog {
+  width: 100%; }
+.modal.n-children-1 .modal-inner {
+  max-width: 25%;
+  margin-left: auto;
+  margin-right: auto; }
+  .modal.n-children-1 .modal-inner::after {
+    clear: both;
+    content: "";
+    display: table; }
+.modal.n-children-2 dialog {
+  float: left;
+  display: block;
+  margin-right: 2.53165%;
+  width: 48.73418%; }
+  .modal.n-children-2 dialog:last-child {
+    margin-right: 0; }
+.modal.n-children-2 .modal-inner {
+  max-width: 50%;
+  margin-left: auto;
+  margin-right: auto; }
+  .modal.n-children-2 .modal-inner::after {
+    clear: both;
+    content: "";
+    display: table; }
 
 .extension-file section:first-child {
   /* Add a border equal to the number of featured extensions - 1 */

js/scratchx.js

@@ -227,13 +227,26 @@ function showModal(templateId, data) {
      */
 
     var zIndex = 100;
-    var modalId = "modal-" + templateId;
-    $modalwrapper = $("<div class='modal-fade-screen'><div class='modal-inner'></div></div>");
+    var modalId = ("modal-" + templateId).replace(",", "-");
+    $modalwrapper = $("<div class='modal-fade-screen'><div class='modal-inner'><div class='modal-content'></div></div></div>");
     var $modal = getOrCreateFromTemplate(modalId, templateId, "dialog", "body", $modalwrapper, data);
+    $(".modal-inner", $modal).append('<div class="modal-close" for="'+modalId+'"></div>');
     $modal.addClass("modal");
+
+    if (typeof(templateId) != "string") {
+        $modal.addClass("n-children-" + templateId.length);
+    } else {
+        $modal.addClass("n-children-1");
+    }
+
     $(".modal-fade-screen", $modal)
         .addClass("visible")
         .click(function(e){if ($(e.target).is($(this))) $(this).trigger("modal:exit")});
+
+    $(".modal-close", $modal).click(function(e){
+        e.preventDefault();
+        $(document).trigger("modal:exit")
+    });
     
     $("body").addClass("modal-open");
 
@@ -265,7 +278,7 @@ $(document).on('click', "[data-action='modal']", function(e){
 
 function JSshowWarning(extensionData) {
     $modal = showModal("template-warning", extensionData);
-    $("button, .modal-close", $modal).click(function(e){
+    $("button", $modal).click(function(e){
         e.preventDefault();
         $(document).trigger("modal:exit")
     });

sass/base/_modal.scss

@@ -89,12 +89,6 @@
     border-radius: $base-border-radius;
     padding: $modal-padding / 2;
     position: relative;
-    @include outer-container;
-
-    .modal-content {
-      color: $base-font-color;
-      @include columns(2 8em);
-    }
 
     a.cta {
       color: white;

sass/scratchx.scss

@@ -62,16 +62,28 @@ body {
 }
 
 
-.modal dialog {
+.modal {
 
-    width: 50%;
+    &.n-children-1 {
+        dialog {
+            width: 100%;
+        }
 
-    &:not(:only-child) {
-        @include span-columns(3 of 6);
+        .modal-inner {
+            @include outer-container(25%);
+        }
     }
 
-}
+    &.n-children-2 {
+        dialog {
+            @include span-columns(3 of 6);
+        }
 
+        .modal-inner {
+            @include outer-container(50%);
+        }
+    }
+}
 
 .extension-file {
     section:first-child {