JSFiddle - React, Tailwind, and code Playground

by uiwwnw

CSS

.ux-dialog{z-index:1000;position:fixed;top:0;left:0;overflow:hidden;width:100%;height:100%;font-size:0;text-align:center}.ux-dialog.close{pointer-events:none}.ux-dialog:before{display:inline-block;height:100%;vertical-align:middle;content:''}.ux-dialog--close{position:absolute;top:0;right:0;width:40px;height:40px;margin:-10px;padding:0;box-shadow:-3px 3px 3px rgba(0,0,0,0.5);border:0;border-radius:50%;font-size:0;background:#fff}.ux-dialog--close:before{display:inline-block;line-height:0;font-size:20px;vertical-align:middle;content:'\d7'}.ux-dialog--loading{position:absolute;bottom:0;left:0;right:0;display:none;height:2px;animation:loading linear 0s;background:linear-gradient(#e66465, #9198e5)}.ux-dialog--loading[style]{display:block}.ux-dialog--content{position:relative;max-width:80%;display:inline-block;padding:10px;vertical-align:middle;font-size:14px;border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.25);background:#fff;animation:open-content .6s}.close>.ux-dialog--content{animation:close-content .6s}.ux-dialog--header{white-space:nowrap;text-align:left;font-size:16px;margin:7px 0 14px;border-bottom:2px solid #333}.ux-dialog--container{overflow:auto;max-height:calc(100vh - 200px);margin:20px;padding:10px 0}.ux-dialog--footer{margin-top:20px;font-size:0}.ux-dialog--footer button{display:inline-block;margin:0 10px;padding:10px 15px;font-size:14px;border-radius:3px;border:1px solid #ddd;background:0}.ux-dialog--dim{z-index:-1;top:0;left:0;position:absolute;width:100%;height:100%;opacity:.3;background:#000;animation:open-dim .4s}.close>.ux-dialog--dim{animation:close-dim .6s}@keyframes open-dim{0%{opacity:0}100%{opacity:.3}}@keyframes close-dim{0%{opacity:.3}100%{opacity:0}}@keyframes open-content{0%{transform:scale3d(0.9, 0.9, 0.9)}50%{transform:scale3d(1.05, 1.05, 1.05)}100%{transform:scale3d(1, 1, 1)}}@keyframes close-content{0%{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05);opacity:1}100%{transform:scale3d(0.5, 0.5,...

JavaScript

/*
 MIT License. 
 ux-dialog v0.1.11
 author: uiwwsw
 homepage:https://github.com/uiwwsw/ux-dialog#readme
 */ "use strict";function _typeof(e){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function _classCallCheck(e,n){if(!(e instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,n){for(var t=0;t<n.length;t++){var o=n[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function _createClass(e,n,t){return n&&_defineProperties(e.prototype,n),t&&_defineProperties(e,t),e}var defaultText={confirm:"확인",cancel:"취소"},contentsType={confirm:"boolean",cancel:"boolean",close:"boolean",dimClose:"boolean",title:"string",content:"string",callback:"function",text:"string",selfClose:"number",closeKey:"number",cancelKey:"number",confirmKey:"number"},UxDialog=function(){function c(e){_classCallCheck(this,c),c.keyUpEvents||(c.keyUpEvents=[]),this.getDefaultContents(e||{})}return _createClass(c,[{key:"checkType",value:function(e){var c=this;Object.entries(e).map(function(e){var n=e[0],t=e[1];if("object"===_typeof(t))c.checkType(t);else{var o=contentsType[n];if(_typeof(t)!==o)throw"".concat(t,"는 ").concat(o,"이 아닙니다.")}})}},{key:"makeNode",value:function(e){var n="",t="";e.confirm&&(n='<button name="confirm" type="button">'.concat(e.confirm.text||defaultText.confirm,"</button>")),e.cancel&&(t='<button name="cancel" type="button">'.concat(e.cancel.text||defaultText.cancel,"</button>"));var o=' \n          <div class="ux-dialog">\n            <div class="ux-dialog--content">\n              <button type="button" class="ux-dialog--close" '.concat(!1===e.close&&'style="display: none;"','>this dialog close</button>\n              <div class="ux-dialog--header">').concat(e.title,'</div>\n              <div...