JS update

src/components/dialog/dialog.js

@@ -0,0 +1,23 @@
+var modal = null
+
+function showModal(modalId) {
+  modal = (modalId)
+  $("#" + modal).show()
+}
+
+$("[data-modalopen]").click(function () {
+  showModal($(this).data("modalopen"))
+  return false;
+})
+
+$(window).click(function (event) {
+  if (modal != null && $(event.target).is("#" + modal)) {
+    $("#" + modal).hide()
+    modal = null
+  }
+})
+
+$("[data-modalclose]").click(function () {
+  $("#" + modal).hide()
+  modal = null
+})

src/components/dialog/index.hbs

@@ -8,7 +8,8 @@ intro: A dialog (also called a modal window or lightbox) is a web page element t
 ---
 <h3>Button below will trigger a dialog</h3>
 <a data-modalopen="alpha-modal" class="nsw-button nsw-button--dark">Open dialog</a>
-<div id="alpha-modal" class="nsw-modal">
+
+<div id="alpha-modal" class="nsw-modal" style="display: none;">
   <div class="nsw-modal_dialog" role="dialog" aria-labelledby="alpha-modal_label" aria-modal="true">
     <div class="nsw-modal_content">
 <button class="nsw-icon-button nsw-modal_close" type="button" aria-expanded="true">