Use modal Refill for popovers. Add JSshowExtensionDialog

css/scratchx.css

@@ -613,7 +613,7 @@ h6 {
 article h1 {
   font-size: 1.5em; }
 
-article h2 {
+article h2, dialog h2 {
   font-size: 1.5em; }
 
 p {
@@ -640,6 +640,132 @@ picture {
   margin: 0;
   max-width: 100%; }
 
+.modal label {
+  cursor: pointer;
+  margin-bottom: 0; }
+.modal label img {
+  border-radius: 150px;
+  display: block;
+  max-width: 300px; }
+.modal .modal-state {
+  display: none; }
+.modal .modal-trigger {
+  background-color: #21b4f0;
+  border-radius: 3px;
+  border: 0;
+  color: #333333;
+  display: inline-block;
+  font-size: inherit;
+  font-weight: bold;
+  padding: 7px 18px;
+  text-decoration: none;
+  background-clip: padding-box;
+  padding: 0.8em 1em; }
+  .modal .modal-trigger:hover:not(:disabled) {
+    background-color: #35bef6;
+    cursor: pointer; }
+  .modal .modal-trigger:active:not(:disabled), .modal .modal-trigger:focus:not(:disabled) {
+    background-color: #15a7e3;
+    cursor: pointer; }
+  .modal .modal-trigger:disabled {
+    cursor: not-allowed;
+    opacity: 0.5; }
+.modal .modal-fade-screen {
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+  position: fixed;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  background: rgba(0, 0, 0, 0.85);
+  opacity: 0;
+  padding-top: 0.6em;
+  text-align: left;
+  visibility: hidden;
+  z-index: 99999999999; }
+  @media screen and (min-width: 60em) {
+    .modal .modal-fade-screen {
+      padding-top: 10em; } }
+  .modal .modal-fade-screen .modal-bg {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    left: 0px;
+    cursor: pointer; }
+.modal .modal-close {
+  position: absolute;
+  top: 1.5em;
+  right: 1.5em;
+  height: 1.5em;
+  width: 1.5em;
+  background: #fff;
+  cursor: pointer; }
+  .modal .modal-close:after, .modal .modal-close:before {
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    bottom: 0;
+    left: 50%;
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+    height: 1.5em;
+    width: 0.15em;
+    background: #dfe3e7;
+    content: '';
+    display: block;
+    margin: -3px 0 0 -1px; }
+  .modal .modal-close:hover:after, .modal .modal-close:hover:before {
+    background: #c2c9d1; }
+  .modal .modal-close:before {
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg); }
+.modal .modal-inner {
+  -webkit-transition: opacity 0.25s ease;
+  -moz-transition: opacity 0.25s ease;
+  transition: opacity 0.25s ease;
+  background: #fff;
+  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; }
+  .modal .modal-inner a.cta {
+    color: white;
+    display: inline-block;
+    margin-right: 0.5em;
+    margin-top: 1em; }
+    .modal .modal-inner a.cta:last-child {
+      padding: 0 2em; }
+.modal .modal-state:checked + .modal-fade-screen,
+.modal .modal-fade-screen.visible {
+  opacity: 1;
+  visibility: visible; }
+.modal .modal-state:checked + .modal-fade-screen .modal-inner,
+.modal .modal-fade-screen.visible .modal-inner {
+  top: 0.5em; }
+
+.modal-open {
+  overflow: hidden; }
+
 dialog {
   display: block;
   position: static; }
@@ -816,19 +942,24 @@ body > section {
 body #home {
   display: block; }
 
-#dialogs {
+#dialogs, #modal-dialogs .modal-inner {
   display: block; }
-  #dialogs::after {
+  #dialogs::after, #modal-dialogs .modal-inner::after {
     clear: both;
     content: "";
     display: table; }
-  #dialogs dialog {
+  #dialogs dialog, #modal-dialogs .modal-inner dialog {
     float: left;
     display: block;
     margin-right: 1.25%;
     width: 32.5%; }
-    #dialogs dialog:last-child {
+    #dialogs dialog:last-child, #modal-dialogs .modal-inner dialog:last-child {
       margin-right: 0; }
+    #dialogs dialog p, #modal-dialogs .modal-inner dialog p {
+      text-align: center; }
+
+#modal-dialogs .modal-inner {
+  background-color: transparent; }
 
 .extension-file section:first-child {
   /* Add a border equal to the number of featured extensions - 1 */

js/scratchx.js

@@ -36,6 +36,10 @@ function JSprojectLoaded() {
     loadExtensionQueue();
 }
 
+function JSshowExtensionDialog() {
+    showModal("dialogs");
+}
+
 var extensionQueue = [];
 function handleParameters() {
     var project;
@@ -198,36 +202,31 @@ function loadFromURLParameter() {
 }
 
 
-/* Popovers */
+/* Modals */
 
-function getOrCreateFromTemplate(elementId, templateId, appendTo, initialStyle) {
+function getOrCreateFromTemplate(elementId, templateId, elementType, appendTo, wrapper) {
-    if (initialStyle === undefined) {
+    elementType = elementType ? elementType : "div";
-        initialStyle = {};
-    }
-    if (appendTo) {
-        appendTo = "body";
-    }
     var $element = $("#" + elementId);
     if (!$element.length) {
         $template = $("#" + templateId);
-        $element = $("<dialog></dialog>")
+        $element = $("<"+elementType+"></"+elementType+">")
             .attr("id", elementId)
-            .html($template.html())
+            .html($template.html());
-            .appendTo(appendTo);
+        if (wrapper) $element.wrapInner(wrapper);
+        $element.appendTo(appendTo)
     }
-    $element.css(initialStyle);
     return $element;
 };
 
 function enableOverlay(forZIndex) {
-    var overlayId = "popover-overlay";
+    var overlayId = "modal-overlay";
     var $overlay = $("#" + overlayId);
     if (!$overlay.length) {
         $overlay = $("<div></div>")
             .attr("id", overlayId)
             .appendTo("body")
             .click(function(){
-                $(this).trigger("popover:exit");
+                $(this).trigger("modal:exit");
             });
     }
     $overlay.css({
@@ -244,34 +243,38 @@ function enableOverlay(forZIndex) {
     return $overlay;
 }
 
-$("[data-action='popover']").click(function(e){
+function showModal(templateId) {
     /*
-     * Usage:
-     *     <a href="#content" data-action="popover" data-template="id-for-content">Popup</a>
-     *
      * Copies the HTML referenced by data-template into a new element,
-     * with id="popover-[template value]" and creates an overlay on the
+     * with id="modal-[template value]" and creates an overlay on the
      * page, which when clicked will close the popup.
      */
 
-    e.preventDefault();
-    var templateId = $(this).data("template");
-    var popoverId = "popover-" + templateId;
     var zIndex = 100;
-    var $overlay = enableOverlay(zIndex);
+    var modalId = "modal-" + templateId;
-    var $popover = getOrCreateFromTemplate(
+    $modalwrapper = $("<div class='modal-fade-screen'><div class='modal-inner'></div></div>");
-        popoverId, templateId, "body", {
+    var $modal = getOrCreateFromTemplate(modalId, templateId, "dialog", "body", $modalwrapper);
-            position: "fixed",
+    $modal.addClass("modal");
-            display: "block",
+    $(".modal-fade-screen", $modal)
-            top: "50%",
+        .addClass("visible")
-            left: "50%",
+        .click(function(e){$(this).trigger("modal:exit")});
-            "z-index": zIndex,
+    $(".modal-inner", $modal).click(function(e){e.stopPropagation();})
-        });
+    $("body").addClass("modal-open");
-    $(document).on("popover:exit", function(){
+    $(document).on("modal:exit", function(){
-        $overlay.css({display: 'none'});
+        $("body").removeClass("modal-open");
-        $popover.css({display: 'none'});
+        $(".modal-fade-screen", $modal).removeClass("visible");
         $(this).off();
     });
+}
+
+$("[data-action='modal']").click(function(e){
+    /*
+     * Usage:
+     *     <a href="#content" data-action="modal" data-template="id-for-content">Popup</a>
+     */
+
+    e.preventDefault();
+    showModal($(this).data("template"));
 });
 
 

sass/base/_base.scss

@@ -12,6 +12,7 @@
 @import "lists";
 @import "tables";
 @import "typography";
+@import "modal";
 
 dialog {
     display: block;

sass/base/_modal.scss

@@ -0,0 +1,128 @@
+.modal {
+  $base-border-color: gainsboro !default;
+  $base-border-radius: 3px !default;
+  $base-background-color: white !default;
+  $base-font-size: 1em !default;
+  $base-line-height: 1.5em !default;
+  $action-color: #477DCA !default;
+  $dark-gray: #333 !default;
+  $light-gray: #DDD !default;
+  $medium-screen: em(640) !default;
+  $large-screen: em(860) !default;
+  $base-font-color: $dark-gray !default;
+  $modal-padding: 3em;
+  $modal-background: $base-background-color;
+  $modal-close-color: $light-gray;
+  $modal-image-height: 135px;
+  $modal-image-width: $modal-image-height;
+  $modal-trigger-image-width: 300px;
+
+  label {
+    cursor: pointer;
+    margin-bottom: 0;
+  }
+
+  label img {
+    border-radius: $modal-trigger-image-width / 2;
+    display: block;
+    max-width: $modal-trigger-image-width;
+  }
+
+  .modal-state {
+    display: none;
+  }
+
+  .modal-trigger {
+    @include button(flat, $action-color);
+    padding: 0.8em 1em;
+  }
+
+  .modal-fade-screen { // overlay
+    @include transition(opacity 0.25s ease);
+    @include position(fixed, 0px 0px 0px 0px);
+    background: rgba(0,0,0, 0.85);
+    opacity: 0;
+    padding-top: 0.6em;
+    text-align: left;
+    visibility: hidden;
+    z-index: 99999999999;
+
+    @include media($large-screen) {
+      padding-top: 10em;
+    }
+
+    .modal-bg {
+      @include position(absolute, 0px 0px 0px 0px);
+      cursor: pointer;
+    }
+  }
+
+  .modal-close {
+    @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
+    @include size(1.5em);
+    background: $modal-background;
+    cursor: pointer;
+
+    &:after,
+    &:before {
+      @include position(absolute, 3px 3px 0 50%);
+      @include transform(rotate(45deg));
+      @include size(0.15em 1.5em);
+      background: $modal-close-color;
+      content: '';
+      display: block;
+      margin: -3px 0 0 -1px;
+    }
+
+    &:hover:after,
+    &:hover:before {
+      background: darken($modal-close-color, 10%);
+    }
+
+    &:before {
+      @include transform(rotate(-45deg));
+    }
+  }
+
+  .modal-inner {
+    @include transition(opacity 0.25s ease);
+    background: $modal-background;
+    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;
+      display: inline-block;
+      margin-right: 0.5em;
+      margin-top: 1em;
+
+      &:last-child {
+        padding: 0 2em;
+      }
+    }
+  }
+
+  .modal-state:checked + .modal-fade-screen,
+  .modal-fade-screen.visible {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .modal-state:checked + .modal-fade-screen .modal-inner,
+  .modal-fade-screen.visible .modal-inner {
+    top: 0.5em;
+  }
+}
+
+.modal-open {
+  overflow: hidden;
+}
+
+// Based on code by Kasper Mikiewicz

sass/base/_typography.scss

@@ -25,7 +25,7 @@ article h1 {
   font-size: $h1-font-size;
 }
 
-article h2 {
+article h2, dialog h2 {
   font-size: $h2-font-size;
 }
 

sass/scratchx.scss

@@ -40,13 +40,20 @@ body {
     }
 }
 
-#dialogs {
+#dialogs, #modal-dialogs .modal-inner {
     @include row();
     dialog {
         @include span-columns(4);
+        p {
+            text-align: center;
+        }
     }
 }
 
+#modal-dialogs .modal-inner {
+    background-color: transparent;
+}
+
 .extension-file {
     section:first-child {
         /* Add a border equal to the number of featured extensions - 1 */