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

dist/tuicss.css

@@ -594,6 +594,12 @@ input, select, textarea {
   -moz-user-select: none;
   -ms-user-select: none; }
 
+.cursor-pointer {
+  cursor: pointer !important; }
+
+.cursor-default {
+  cursor: default !important; }
+
 /* Components */
 .tui-button {
   display: inline-block;
@@ -695,12 +701,12 @@ input, select, textarea {
 .tui-dropdown:hover > .tui-dropdown-content:first-of-type {
   display: block; }
 
-.tui-window-fieldset {
+.tui-fieldset {
   border: 6px white double;
   padding: 12px;
   background-color: inherit;
   margin-bottom: 6px; }
-  .tui-window-fieldset.no-legend {
+  .tui-fieldset.no-legend {
     margin-top: 6px; }
 
 .tui-input-fieldset {
@@ -747,6 +753,18 @@ input, select, textarea {
     left: initial;
     right: 16px; }
 
+.tui-fieldset-statusbar-top {
+  position: absolute;
+  top: 0px;
+  left: 16px;
+  color: white;
+  background-color: inherit;
+  z-index: 2;
+  padding: 2px; }
+  .tui-fieldset-statusbar-top.right {
+    left: initial;
+    right: 16px; }
+
 .tui-fieldset-button::before {
   content: "["; }
 
@@ -772,9 +790,7 @@ input, select, textarea {
   background-color: #a8a8a8;
   padding: 0px 2px;
   z-index: 9;
-  display: block; }
-
-.tui-nav-fixed {
+  display: block;
   position: fixed; }
 
 .tui-nav ul li {
@@ -1758,3 +1774,24 @@ input, select, textarea {
         right: 100%; }
       .row .col.push-xl12 {
         left: 100%; } }
+
+.tui-modal {
+  position: absolute;
+  left: 0px;
+  right: 0px;
+  top: 100px;
+  z-index: 101;
+  display: none; }
+  .tui-modal.active {
+    display: block !important; }
+
+.tui-overlap {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 100;
+  display: none; }
+  .tui-overlap.active {
+    display: block !important; }

dist/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");
+    });
 }

dist/tuicss.min.js

@@ -1 +1 @@
-function tabsController(){$(".tui-tab").click(function(t){$(".tui-tab-content").hide();let e=$(this).attr("data-tab-content");$(`#${e}`).show(),$(".tui-tab").removeClass("active"),$(this).addClass("active")}),$(".tui-tab.active").click()}function dateController(){let t=setInterval(function(){let e=new Date,a=$(".tui-date");if(!a.length)return void clearInterval(t);let n=a.attr("data-format"),l=2==(e.getMonth()+"").length?e.getMonth()+1:"0"+(e.getMonth()+1),i=2==(e.getDay()+"").length?e.getDay()+1:"0"+(e.getDay()+1),o=e.getFullYear(),r=2==(e.getHours()+"").length?e.getHours():"0"+e.getHours(),s=2==(e.getMinutes()+"").length?e.getMinutes():"0"+e.getMinutes(),c=2==(e.getSeconds()+"").length?e.getSeconds():"0"+e.getSeconds();n=(n=(n=(n=(n=(n=n.replace("M",l)).replace("d",i)).replace("y",o)).replace("h",r)).replace("m",s)).replace("s",c),a.html(n)})}function sidenavController(){$(".tui-sidenav-button").click(function(){$(".tui-sidenav").hasClass("active")?$(".tui-sidenav").removeClass("active"):$(".tui-sidenav").addClass("active")})}$(document).ready(function(){tabsController(),dateController(),sidenavController()});
+function tabsController(){$(".tui-tab").click(function(t){$(".tui-tab-content").hide();let e=$(this).attr("data-tab-content");$(`#${e}`).show(),$(".tui-tab").removeClass("active"),$(this).addClass("active")}),$(".tui-tab.active").click()}function dateController(){let t=setInterval(function(){let e=new Date,a=$(".tui-date");if(!a.length)return void clearInterval(t);let l=a.attr("data-format"),n=2==(e.getMonth()+"").length?e.getMonth()+1:"0"+(e.getMonth()+1),o=2==(e.getDay()+"").length?e.getDay()+1:"0"+(e.getDay()+1),i=e.getFullYear(),c=2==(e.getHours()+"").length?e.getHours():"0"+e.getHours(),s=2==(e.getMinutes()+"").length?e.getMinutes():"0"+e.getMinutes(),r=2==(e.getSeconds()+"").length?e.getSeconds():"0"+e.getSeconds();l=(l=(l=(l=(l=(l=l.replace("M",n)).replace("d",o)).replace("y",i)).replace("h",c)).replace("m",s)).replace("s",r),a.html(l)})}function sidenavController(){$(".tui-sidenav-button").click(function(){$(".tui-sidenav").hasClass("active")?$(".tui-sidenav").removeClass("active"):$(".tui-sidenav").addClass("active")})}function modalController(){$(".tui-modal-button").click(function(){$(".tui-overlap").addClass("active");let t=$(this).attr("data-modal");$(`#${t}`).addClass("active")}),$(".tui-modal-close-button").click(function(){$(".tui-overlap").removeClass("active");let t=$(this).attr("data-modal");$(`#${t}`).removeClass("active")})}$(document).ready(function(){tabsController(),dateController(),sidenavController(),modalController()});