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; }
+  display: block;
-
-.tui-nav-fixed {
   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()});

examples/inputs.html

@@ -16,7 +16,7 @@
 
 <body class="center" style="padding: 50px">
     <div class="tui-window" style="text-align: left">
-        <fieldset class="tui-window-fieldset">
+        <fieldset class="tui-fieldset">
             <legend class="center">Form</legend>
             Text.......: <input class="tui-input" value="text" /><br>
             Number.....: <input class="tui-input" type="number" value="25" /><br>

examples/modal.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" class="tui-bg-blue-black">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Modal Example</title>
+    <script src="plugins/jquery-3.4.1.min.js"></script>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body class="center">
+    <div style="margin-top: 300px"></div>
+
+    <!-- Button -->
+    <button class="tui-button tui-modal-button" data-modal="modal">◄ Click ►</button>
+
+    <!-- Overlap -->
+    <div class="tui-overlap"></div>
+
+    <!-- Modal window -->
+    <div id="modal" class="tui-modal">
+        <div class="tui-window red-168 left-align">
+            <fieldset class="tui-fieldset">
+                <legend class="red-255 yellow-255-text">Alert</legend>
+                This is an example of a modal window.
+                <br><br>
+                <div class="tui-divider"></div>
+                <br>
+                <button class="tui-button cyan-168 white-255-text tui-modal-close-button right" data-modal="modal">close</button>
+            </fieldset>
+        </div>
+    </div>
+</body>
+</html>

examples/pocket-calculator.html

@@ -13,7 +13,7 @@
     <div class="tui-screen-800-600 bordered blue-168" style="padding: 40px">
         <div class="center" style="margin-top: 100px;">
             <div class="tui-window white-168">
-                <fieldset class="tui-window-fieldset">
+                <fieldset class="tui-fieldset">
                     <legend align="center">Pocket Calculator</legend>
                     &nbsp;<input id="display" class="tui-input blue-168 white-255-text" style="text-align: right;" disabled value="872.9000" />
                     <br><br>

examples/progress-bar.html

@@ -13,7 +13,7 @@
 
     <body class="center" style="padding: 50px">
         <div class="tui-window" style="text-align: left;">
-            <fieldset class="tui-window-fieldset">
+            <fieldset class="tui-fieldset">
                 <legend class="center">Progress</legend>
                 0% ............: 
                 <div class="tui-progress-bar inline-block valign-middle">

examples/register.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Register Example</title>
+    <script src="plugins/jquery-3.4.1.min.js"></script>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+    <style>
+        ul li {
+            display: inline-block;
+            margin-right: 60px;
+        }
+
+    </style>
+</head>
+
+<body>
+    <div class="tui-screen-800-600 bordered white-168 tui-bg-blue-black center">
+        
+        <div class="tui-window full-width tui-no-shadow left-align">
+            <fieldset class="tui-fieldset no-legend">
+                <ul>
+                    <li><a class="white-255-hover black-text-hover cursor-pointer inline">Tables</a></li>
+                    <li><a class="white-255-hover black-text-hover cursor-pointer inline">Reports</a></li>
+                    <li><a class="white-255-hover black-text-hover cursor-pointer inline">Print</a></li>
+                    <li><a class="white-255-hover black-text-hover cursor-pointer inline">Admin</a></li>
+                </ul>
+            </fieldset>
+        </div>
+
+        <div class="tui-window left-align" style="margin-top: 60px;">
+            <fieldset class="tui-fieldset">
+                <legend class="white-255-text center">Register</legend>
+                <div style="display: inline-block; width: 500px">
+                    <span class="yellow-255-text">N</span>umber.....:
+                    <input style="width: 100px" class="tui-input" type="number" value="106" /><br>
+                    <span class="yellow-255-text">D</span>ocument...:
+                    <input style="width: 150px" class="tui-input" value="1.504.00.1-00" /><br>
+                    <span class="yellow-255-text">F</span>irst Name.:
+                    <input style="width: 250px" class="tui-input" value="Robert" /><br>
+                    <span class="yellow-255-text">S</span>econd Name:
+                    <input style="width: 250px" class="tui-input" value="Munique Steffens" /><br>
+                    <span class="yellow-255-text">C</span>ity.......:
+                    <input style="width: 150px" class="tui-input" value="Blumenau" /><br>
+                    S<span class="yellow-255-text">t</span>ate......:
+                    <input style="width: 50px" class="tui-input" value="SC" /><br>
+                    C<span class="yellow-255-text">o</span>ntry.....:
+                    <input style="width: 100px" class="tui-input" value="Brazil" /><br><br>
+                    P<span class="yellow-255-text">h</span>one......:
+                    <input style="width: 200px" class="tui-input" value="(47) 3 3784-2134" /><br>
+                    F<span class="yellow-255-text">a</span>x........:
+                    <input style="width: 200px" class="tui-input" value="" /><br>
+                    E<span class="yellow-255-text">m</span>ail......:
+                    <input style="width: 250px" class="tui-input" value="robert@email.com" /><br><br>
+                    <span class="yellow-255-text">G</span>roup......:
+                    <select class="tui-input">
+                        <option>Awner</option>
+                        <option>Administrators</option>
+                        <option>Common Users</option>
+                    </select>
+                </div>
+                <div style="display: inline-block; width: 200px; vertical-align: top">
+                    <span>Locale</span>
+                    <div class="cyan-168">
+                        <label class="tui-radio black-255-text"> en-US
+                            <input type="radio" name="locale" checked>
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> pt-BR
+                            <input type="radio" name="locale">
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> ch-CH
+                            <input type="radio" name="locale">
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> none
+                            <input type="radio" name="locale">
+                            <span></span>
+                        </label>
+                    </div>
+                    <div class="right">
+                        <span>...Cod:</span><input style="width: 30px" class="tui-input">
+                    </div>
+                    <br><br>
+                    <span>Currency</span>
+                    <div class="cyan-168 black-255-text">
+                        <label class="tui-radio black-255-text"> USD
+                            <input type="radio" name="currency" checked>
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> R$
+                            <input type="radio" name="currency">
+                            <span></span>
+                        </label>
+                        <label class="tui-radio black-255-text"> none
+                            <input type="radio" name="currency">
+                            <span></span>
+                        </label>
+                    </div>
+                    <br>
+                    Registered at: 09/06/2019 09:38:00 PM
+                </div>
+                <br><br>
+                <button class="tui-button"><span class="yellow-255-text">n</span>ew</button>
+                <button class="tui-button"><span class="yellow-255-text">d</span>el</button>
+                <button class="tui-button"><span class="yellow-255-text">s</span>earch</button>
+                <button class="tui-button"><span class="yellow-255-text">l</span>ist</button>
+                <button class="tui-button"><span class="yellow-255-text">r</span>eports</button>
+                <br><br>
+            </fieldset>
+        </div>
+
+        <div class="tui-statusbar blue-255 white-255-text absolute left-align">
+            <ul>
+                <li><a>09/06/2019</a></li>
+                <li><a>Service Orders Count: 2</a></li>
+                <li><a>10:43:00 PM</a></li>
+            </ul>
+        </div>
+
+    </div>
+</body>
+</html>

examples/scandisk.html

@@ -43,8 +43,8 @@
         <br>
         <div>
             <span class="cyan-255-text">75% complete</span>
-            <span class="tui-progress right tui-texturized-blue-black" style="width: 550px; ">
+            <span class="tui-progress-bar right tui-bg-blue-black" style="width: 550px; ">
-                <span style="width: 75%" class="yellow-255"></span>
+                <span class="tui-progress" style="width: 75%" class="yellow-255"></span>
             </span>
         </div>
     </div>

examples/table.html

@@ -18,7 +18,7 @@
 
     <body class="center" style="padding: 50px">
         <div class="tui-window" style="text-align: left;">
-            <fieldset class="tui-window-fieldset">
+            <fieldset class="tui-fieldset">
                 <legend class="center">Table</legend>
                 <table class="tui-table" style="width: 700px">
                     <thead>
@@ -93,10 +93,10 @@
                     </tbody>
                 </table>
             </fieldset>
-        </div>
+        </div><br>
 
         <div class="tui-window" style="text-align: left;">
-            <fieldset class="tui-window-fieldset">
+            <fieldset class="tui-fieldset">
                 <legend class="center">Table hover</legend>
                 <table class="tui-table tui-table-hover" style="width: 700px">
                     <thead>

examples/turbo-vision.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Turbo Vision Example</title>
+    <script src="plugins/jquery-3.4.1.min.js"></script>
+    <script src="../dist/tuicss.min.js"></script>
+    <link rel="stylesheet" href="../dist/tuicss.min.css">
+</head>
+
+<body>
+    <div class="tui-screen-800-600 bordered tui-bg-blue-black">
+
+        <!-- Navbar -->
+        <nav class="tui-nav absolute">
+            <span class="tui-date" data-format="h:m:s"></span>
+            <ul>
+                <li class="tui-dropdown"><a class="red-168-text">≡</a></li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">F</span>ile
+                    <div class="tui-dropdown-content">
+                        <ul>
+                            <li>
+                                <a href="#!">
+                                    <span class="red-168-text">N</span>ew
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#!">
+                                    <span class="red-168-text">O</span>pen...
+                                    <span class="tui-shortcut">F3</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#!">
+                                    <span class="red-168-text">S</span>ave
+                                    <span class="tui-shortcut">F2</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#!">
+                                    S<span class="red-168-text">a</span>ve as...
+                                </a>
+                            </li>
+                            <li>
+                                <a href="#!">
+                                    Save a<span class="red-168-text">l</span>l
+                                </a>
+                            </li>
+                            <div class="tui-black-divider"></div>
+
+                            <!-- SUBMENU EXAMPLE -->
+
+                            <li class="tui-dropdown block">
+                                <span class="right">►</span>
+                                <span class="red-168-text">M</span>ore
+                                <div class="tui-dropdown-content">
+                                    <ul>
+                                        <li>
+                                            <a href="#!">
+                                                <span class="red-168-text">C</span>hange dir...
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#!">
+                                                <span class="red-168-text">P</span>rint
+                                            </a>
+                                        </li>
+                                        <li>
+                                            <a href="#!">
+                                                <span class="red-168-text">D</span>OS shell
+                                            </a>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </li>
+
+                            <div class="tui-black-divider"></div>
+                            <li>
+                                <a href="#!">
+                                    <span class="red-168-text">Q</span>uit
+                                    <span class="tui-shortcut">F10</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">E</span>dit
+                </li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">E</span>dit Styled
+                </li>
+                <li class="tui-dropdown">
+                    <span class="red-168-text">H</span>elp
+                </li>
+            </ul>
+        </nav>
+
+        <!-- Edit panel -->
+        <div class="tui-window full-width tui-no-shadow" style="margin-top: 20px;">
+            <fieldset class="tui-fieldset">
+                <legend class="center">MYAPP.CPP</legend>
+                <span class="tui-fieldset-button"><span class="green-255-text">↕</span></span>
+                <span class="tui-fieldset-button left"><span class="green-255-text">■</span></span>
+                <span class="tui-fieldset-statusbar-top right" style="margin-right: 50px">1</span>
+                <span class="tui-fieldset-statusbar" style="margin-left: 50px;">&nbsp;1:1&nbsp;</span>
+                <textarea class="tui-textarea full-width" style="height: 493px; overflow: scroll;">#include &#60;iostream&#62;
+using namespace std;
+
+int main() 
+{
+    cout &#60;&#60; "Hello, World!";
+    return 0;
+}</textarea>
+            </fieldset>
+        </div>
+
+        <!-- Status bar -->
+        <div class="tui-statusbar absolute">
+            <ul>
+                <li><a href="#!"><span class="red-168-text">F1</span> Help</a></li>
+                <li><a href="#!"><span class="red-168-text">F2</span> Save</a></li>
+                <li><a href="#!"><span class="red-168-text">F3</span> Open</a></li>
+                <li><a href="#!"><span class="red-168-text">Alt+F9</span> Compile</a></li>
+                <span class="tui-statusbar-divider"></span>
+                <li><a href="#!"><span class="red-168-text">F10</span> Menu</a></li>
+            </ul>
+        </div>
+
+    </div>
+</body>
+
+</html>

examples/window-and-panels.html

@@ -26,7 +26,7 @@
         <!-- Simple window -->
         <div class="info-text">Simple window</div>
         <div class="tui-window">
-            <fieldset class="tui-window-fieldset">
+            <fieldset class="tui-fieldset">
                 <legend>Window</legend>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
                 Curabitur id vestibulum libero, id fermentum lorem.<br>
@@ -45,7 +45,7 @@
         <!-- Scrool window -->
         <div class="info-text">Scrool window</div>
         <div class="tui-window white-168 black-255-text">
-            <fieldset class="tui-window-fieldset">
+            <fieldset class="tui-fieldset">
                 <legend class="white-255-text">Window</legend>
                 <div style="overflow: scroll; height: 200px; width: 400px; white-space: nowrap;">
                     <span class="tui-shadow">The Lorem Ipsum </span><br><br>
@@ -74,7 +74,7 @@
         <!-- Fieldset features -->
         <div class="info-text">Fieldset features</div>
         <div class="tui-window orange-168 black-255-text">
-            <fieldset class="tui-window-fieldset tui-border-solid white-border">
+            <fieldset class="tui-fieldset tui-border-solid white-border">
                 <legend class="center white-255-text">Window</legend>
                 <button class="tui-fieldset-button left"><span class="green-255-text">↑</span></button>
                 <button class="tui-fieldset-button"><span class="green-255-text">■</span></button>
@@ -98,7 +98,7 @@
         <!-- Item select -->
         <div class="info-text">Item select</div>
         <div class="tui-window purple-168">
-            <fieldset class="tui-window-fieldset no-legend tui-border-solid" style="width: 300px">
+            <fieldset class="tui-fieldset no-legend tui-border-solid" style="width: 300px">
                 <ul>
                     <li class="cyan-255-hover black-255-text-hover">
                         <a href="#!">
@@ -125,7 +125,7 @@
         <!-- Window textarea -->
         <div class="info-text">Window textarea</div>
         <div class="tui-window">
-            <fieldset class="tui-window-fieldset">
+            <fieldset class="tui-fieldset">
                 <legend class="center">MYAPP.CPP</legend>
                 <button class="tui-fieldset-button"><span class="green-255-text">↑</span></button>
                 <button class="tui-fieldset-button tui-fieldset-button-left"><span class="green-255-text">■</span></button>

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';