JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<button name="modal" data-modal="#mymodal" data-click="show">show</button>

<div class="dropdown" role="listbox" aria-multiselectable="true" aria-busy="true" data-dropdown>
  <span class="input">
    <input type="text" name="value" value="" data-on-change="filter" />
    <button type="button" name="dropdown" data-on-click="toggle"><i class="icon small">arrow_drop_down</i></button>
  </span>
  <div class="dropdown-menu" data-dropdown-menu>
    <span class="input">
      <input type="text" name="text" placeholder="Search" />
      <button type="button" name="text" data-on-click="search"><i class="icon small">search</i></button>
    </span>
    <ul class="list">
      <li><data>apple</data></li>
      <li><data>orange</data></li>
      <li><data>banana</data></li>
    </ul>
    <nav class="pagination">
      <a class="prev">prev</a>
      <span class="paging">
        <a>1</a>
        <a>2</a>
      </span>
      <a class="next">next</a>
    </nav>
  </div>
</div>

<div id="mymodal" class="modal" aria-hidden="true" role="dialog" data-backdrop-static>
  <div class="dialog">
    <div class="dialog-content">
      <header class="dialog-header">
        <strong>head</strong>
        <button name="modal" data-click="hide">x</button>
      </header>
      <main class="dialog-main">
        <p>This is my dialog content</p>
      </main>
      <footer class="dialog-footer">
        <span>
          <button data-hide="modal" data-on-click="save">Ok</button>
        </span>
      </footer>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}
header, main, footer, nav, section, article {
  display: block;
}
/* MODAL */
.modal {
    display: flex;
    
    overflow: auto;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.modal[aria-hidden=true] {
  display: none;
}

.modal[role=dialog] {
    background: rgba(0,0,0,0.8);
}

.modal[role=alert] {
    
}

/* DIALOG */
.dialog {
  max-width: 960px;
  margin: auto;
  
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.dialog-content {
  box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
  border: 1px solid #ccc;
  background: #fff;
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: .5rem 1rem;
  background: #eee;
}
.dialog-main {
  padding: 1rem;
}
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #ccc;
  padding: .5rem 1rem;
  background: #eee;
}

JavaScript

// UTIL
var UTIL = (function ($) {
    var defaults = {
        handler: {
            click: 'data-click'
        }
    };

    var util = {
      trigger: {
        click: {
          toggle: function(e) {
            var target = $(e.currentTarget);
            var name = target.data('toggle') || target.data('name') || target.attr('name');

            switch(name) {
              case'dropdown':
                alert('dropdown');
              break;
            }
          },
          show: function(e) {
          	var target = $(e.currentTarget);
            var name = target.data('show') || target.data('name') || target.attr('name');
            
            switch(name) {
            	case 'modal':
              	var modal = target.data('modal');
                $(modal).attr('aria-hidden', 'false');
                
                $(modal).on('click', function(e) {
                	if ($(e.target).is($(modal)) && $(e.target).data('backdrop-static') == undefined) {
                     $(modal).attr('aria-hidden', 'true');
                  }
                });
              break;
            }
          },
          hide: function(e) {
          	var target = $(e.currentTarget);
            var name = target.data('hide') || target.data('name') || target.attr('name');
            
            switch(name) {
            	case 'modal':
              	var modal = target.data('modal') || '.modal';
                $(modal).attr('aria-hidden', 'true');
              break;
            }
          }
        }
      },
			load: {
        event: function(bind, handler, trigger) {

          for(var name in handler) {
            var target = '[' + handler[name] + ']';
            var key = handler[name].split('-').slice(1, -1).join('-'); // middle key

            if(key !== '') key = key + '-';

            // set
            switch(name) {
              case 'mouse':
                name = 'mouseup mousedown mouseover mouseout';
                break;
      ...