JSFiddle - React, Tailwind, and code Playground

by FiNGAHOLiC

HTML

<dialog class="dialog">
  <p>This is a dialog!</p>
  <button id="close">Close Dialog!</button>
</dialog>
<button id="show">Open Dialog!</button>

CSS

dialog {
    /*default dialog's css*/
    position: absolute;
    left: 0px;
    right: 0px;
    width: -webkit-fit-content;
    height: -webkit-fit-content;
    margin: auto;
    border: solid;
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    padding: 1em;
    background: white;
    color: black;
}
.dialog[open] {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-animation: show-dialog 1s ease normal;
}
.dialog.hide {
    -webkit-animation: hide-dialog 1s ease normal;
}
.dialog::backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    -webkit-animation: none;
}
.dialog[open]::backdrop {
    -webkit-animation: show-backdrop 0.5s ease 0.2s normal;
}
.dialog.hide::backdrop {
    -webkit-animation: hide-backdrop 0.5s ease 0.2s normal;
}
@-webkit-keyframes show-dialog {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes hide-dialog{
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

@-webkit-keyframes show-backdrop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes hide-backdrop{
    to {
        opacity: 0;
    }
}

JavaScript

var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
    //dialog.show();
    dialog.showModal();
};
document.querySelector('#close').onclick = function() {
    dialog.classList.add('hide');
    dialog.addEventListener('webkitAnimationEnd', function(){
        dialog.classList.remove('hide');
        dialog.close();
        dialog.removeEventListener('webkitAnimationEnd',  arguments.callee, false);
    }, false);
};