npm package npm downloads jsdelivr github
npm package npm downloads jsdelivr github

CSS vanilla dialog component.


$ yarn add @_nu/css-dialog
├── core.css        // core
├── transition.css  // animation 
└── position
    ├── top.css     // show on top
    ├── right.css   // show on right
    ├── bottom.css  // show on bottom
    ├── left.css    // show on left
    └── middle.css  // show on middle


  <!-- others -->
  <div id="nu_dialog_root">
    <dialog role="dialog" aria-modal="true" tabindex="-1" id="dialog" class="nu_dialog_wrap">
        <button id="mask" title="mask" class="nu_dialog_mask"></button>
        <section tabindex="-1" class="nu_dialog">
            <!-- here put the content -->
            <button id="close" title="close" class="nu_dialog_close">&times;</button>

For accessibility, the button tag is recommended for mask and close labels.

Selector function
.nu_dialog_wrap[open] .nu_dialog show or hide
.nu_dialog_wrap._top .nu_dialog show on top
.nu_dialog_wrap._right .nu_dialog show on right
.nu_dialog_wrap._bottom .nu_dialog show on bottom
.nu_dialog_wrap._left .nu_dialog show on left
.nu_dialog_wrap._middle .nu_dialog show on middle


.nu_dialog_wrap {
  display: block;
  transform: translate(0, 50px);
.nu_dialog_wrap {
  transition: opacity 200ms, visibility 200ms;
.nu_dialog_wrap[open] {
  transition: opacity 200ms;

Logic Only


<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/css/core.min.css" />
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/css/position/top.min.css">
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/css/position/right.min.css">
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/css/position/bottom.min.css">
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/css/position/left.min.css">
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/css/position/middle.min.css">
Last Updated: 5/16/2020, 3:33:45 PM