Dialog
| npm package | npm downloads | jsdelivr | github |
|---|---|---|---|
 |  |  |
CSS vanilla dialog component.
install
$ yarn add @_nu/css-dialog
@_nu/css-dialog/css
âââ 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
API
<body>
<!-- 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">×</button>
</section>
</dialog>
</div>
</body>
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 |
Animation?
.nu_dialog_wrap {
display: block;
}
.nu_dialog{
transform: translate(0, 50px);
}
.nu_dialog_wrap {
transition: opacity 200ms, visibility 200ms;
}
.nu_dialog_wrap[open] {
transition: opacity 200ms;
}
Logic Only
Npm CDN
<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">