Create modal component; Change the fieldset class to remove window. Other little changes...

src/components/fieldset.scss

@@ -1,4 +1,4 @@
-.tui-window-fieldset {
+.tui-fieldset {
     border: 6px white double;
     padding: 12px;
     background-color: inherit;
@@ -56,6 +56,20 @@
         right: 16px;
     }
 }
+.tui-fieldset-statusbar-top {
+    position: absolute;
+    top: 0px;
+    left: 16px;
+    color: white;
+    background-color: inherit;
+    z-index: 2;
+    padding: 2px;
+
+    &.right {
+        left: initial;
+        right: 16px;
+    }
+}
 .tui-fieldset-button::before {
     content: "[";
 }

src/components/modal.scss

@@ -0,0 +1,23 @@
+.tui-modal {
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 100px;
+    z-index: 101;
+    display: none;
+    &.active {
+        display: block !important;
+    }
+}
+.tui-overlap {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    z-index: 100;
+    display: none;
+    &.active {
+        display: block !important;
+    }
+}

src/components/navbar.scss

@@ -6,8 +6,6 @@
     padding: 0px 2px;
     z-index: 9;
     display: block;
-}
-.tui-nav-fixed {
     position: fixed;
 }
 .tui-nav ul li {

src/js/tuicss.js

@@ -5,6 +5,7 @@ $(document).ready(function() {
     tabsController();
     dateController();
     sidenavController();
+    modalController();
 });
 
 /**
@@ -21,6 +22,9 @@ function tabsController() {
     $('.tui-tab.active').click();
 }
 
+/**
+ * Date field controller
+ */
 function dateController() {
     let interval = setInterval(function () {
         let today = new Date();
@@ -49,6 +53,9 @@ function dateController() {
     });
 }
 
+/**
+ * Sidenav Controller
+ */
 function sidenavController() {
     $(".tui-sidenav-button").click(function() {
         let sidenav = $(".tui-sidenav");
@@ -58,4 +65,20 @@ function sidenavController() {
             $(".tui-sidenav").addClass("active");
         }
     });
+}
+
+/**
+ * Modal controller
+ */
+function modalController() {
+    $(".tui-modal-button").click(function() {
+        $(".tui-overlap").addClass("active");
+        let modalId = $(this).attr("data-modal");
+        $(`#${modalId}`).addClass("active");
+    });
+    $(".tui-modal-close-button").click(function() {
+        $(".tui-overlap").removeClass("active");
+        let modalId = $(this).attr("data-modal");
+        $(`#${modalId}`).removeClass("active");
+    });
 }

src/styles/util.scss

@@ -68,4 +68,11 @@
 }
 .tui-disable-select {
     @include disable-select;
+}
+
+.cursor-pointer {
+    cursor: pointer !important;
+}
+.cursor-default {
+    cursor: default !important;
 }

src/tuicss.scss

@@ -28,4 +28,5 @@
 @import './components/shadow.scss';
 @import './components/background.scss';
 @import './components/border.scss';
-@import './components/grid.scss';
+@import './components/grid.scss';
+@import './components/modal.scss';