added modal widget

src/Foundation.hs

@@ -399,6 +399,12 @@ defaultMenuLayout menu widget = do
         asidenav = $(widgetFile "widgets/asidenav")
         breadcrumbs :: Widget
         breadcrumbs = $(widgetFile "widgets/breadcrumbs")
+        modal :: [Char] -> [Char] -> Widget
+        modal modalTrigger modalContent = do
+          let
+            modalId :: Int32
+            modalId = 13
+          $(widgetFile "widgets/modal")
 
     pc <- widgetToPageContent $ do
         addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900"

templates/default-layout.hamlet

@@ -6,6 +6,8 @@
   <!-- secondary navigation at the side -->
   ^{asidenav}
 
+  ^{modal ".toggler" "Sit quis culpa eiusmod consectetur laborum aliquip consequat nisi exercitation eu pariatur laboris elit sit. Incididunt nulla quis sint duis ut ipsum incididunt magna. Pariatur aliquip fugiat exercitation non irure sunt id id cillum in nisi. Ad dolor qui enim ad labore est pariatur dolor occaecat excepteur ex labore exercitation velit laborum amet cupidatat. Pariatur veniam proident minim cillum ad sint ad officia cillum deserunt dolore mollit commodo exercitation. Anim laborum non sunt exercitation labore cupidatat amet aliquip ex anim ut do voluptate voluptate tempor."}
+
   <div .main__content>
 
     <!-- alerts -->

templates/home.hamlet

@@ -67,3 +67,8 @@
       Knopf-Test:
         <form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
           ^{btnWdgt}
+
+<hr>
+<div>
+  <div .toggler>
+    ^{lipsum}

templates/widgets/modal.hamlet

@@ -0,0 +1,4 @@
+<div .modal.js-modal #modal-#{modalId} data-trigger=#{modalTrigger} data-closeable=true>
+  $# #{modalContent}
+  ^{lipsum}
+  ^{lipsum}

templates/widgets/modal.julius

@@ -0,0 +1,56 @@
+document.addEventListener('DOMContentLoaded', function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  if (!window.utils.modal) {
+    window.utils.modal = function(modal) {
+      var overlay = document.createElement('div');
+      var closer = document.createElement('div');
+      var trigger = document.querySelector(modal.dataset.trigger);
+      var closeBound;
+
+      this.open = function openFn() {
+        modal.classList.add('modal--open');
+        overlay.classList.add('modal__overlay');
+        modal.parentNode.insertBefore(overlay, modal);
+        overlay.classList.add('modal__overlay--open');
+        toggleScroll(false);
+
+        if (modal.dataset.closeable === 'true') {
+          closer.classList.add('modal__closer');
+          modal.insertBefore(closer, null);
+          closer.addEventListener('click', closeBound, false);
+          overlay.addEventListener('click', closeBound, false);
+        }
+      };
+
+      this.openOnEvent = function openOnEventFn(event) {
+        if (event.detail.for === modal.getAttribute('id')) {
+          this.open();
+        }
+      };
+      this.close = function closeFn(event) {
+        if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
+          modal.classList.remove('modal--open');
+          overlay.classList.remove('modal__overlay--open');
+          toggleScroll(true);
+          closer.removeEventListener('click', closeBound, false);
+        }
+      };
+
+      document.addEventListener('modal-open', this.openOnEvent.bind(this), false);
+      closeBound = this.close.bind(this);
+      if (trigger) {
+        trigger.addEventListener('click', this.open.bind(this), false);
+      }
+    }
+  }
+
+  function toggleScroll(scrollable) {
+    document.body.classList.toggle('no-scroll', !scrollable);
+  }
+
+  new utils.modal(document.querySelector('#modal-13')); // hashtag{modalId} scope-variable
+
+}, false);

templates/widgets/modal.lucius

@@ -0,0 +1,66 @@
+.modal {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  display: block;
+  background-color: rgba(130, 130, 130, 0.9);
+  min-width: 60vw;
+  min-height: 100px;
+  max-height: calc(100vh - 30px);
+  border-radius: 20px;
+  z-index: -1;
+  color: white;
+  padding: 20px;
+  overflow: scroll;
+
+  &.modal--open {
+    z-index: 200;
+  }
+}
+
+@media (max-width: 999px) {
+  .modal {
+    min-width: 80vw;
+  }
+}
+@media (max-width: 666px) {
+  .modal {
+    min-width: 90vw;
+  }
+}
+@media (max-width: 444px) {
+  .modal {
+    min-width: calc(100vw - 20px);
+  }
+}
+
+.modal__overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  z-index: -1;
+  transition: background-color .2s ease;
+
+  &.modal__overlay--open {
+    z-index: 199;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.modal__closer {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: block;
+  width: 20px;
+  height: 50px;
+  background-color: blue;
+}
+
+.no-scroll {
+  overflow: hidden;
+}