diff --git a/src/Foundation.hs b/src/Foundation.hs
index 50b84b6d8..96c620455 100644
--- a/src/Foundation.hs
+++ b/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"
diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet
index 64ec8c8f1..9476d7889 100644
--- a/templates/default-layout.hamlet
+++ b/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 -->
diff --git a/templates/home.hamlet b/templates/home.hamlet
index 940318c76..71c1d41d4 100644
--- a/templates/home.hamlet
+++ b/templates/home.hamlet
@@ -67,3 +67,8 @@
       Knopf-Test:
         <form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
           ^{btnWdgt}
+
+<hr>
+<div>
+  <div .toggler>
+    ^{lipsum}
diff --git a/templates/widgets/modal.hamlet b/templates/widgets/modal.hamlet
new file mode 100644
index 000000000..6906448e7
--- /dev/null
+++ b/templates/widgets/modal.hamlet
@@ -0,0 +1,4 @@
+<div .modal.js-modal #modal-#{modalId} data-trigger=#{modalTrigger} data-closeable=true>
+  $# #{modalContent}
+  ^{lipsum}
+  ^{lipsum}
diff --git a/templates/widgets/modal.julius b/templates/widgets/modal.julius
new file mode 100644
index 000000000..53b118672
--- /dev/null
+++ b/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);
diff --git a/templates/widgets/modal.lucius b/templates/widgets/modal.lucius
new file mode 100644
index 000000000..8c49cb4cd
--- /dev/null
+++ b/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;
+}