@_nu/css-modal 中文文档教程
css-modal
css vanilla modal component.
安装
$ yarn add @_nu/css-modal
API
<div tabindex="-1" class="nu_modal">
<button title="mask" class="nu_mask"></button>
<!-- here put the content -->
</div>
为了无障碍可访问性,这边推荐使用 button
标签作为 mask
的标签。
选择器 | 功能 |
---|---|
.nu_modal | 弹窗 |
.nu_mask | 遮罩 |
如何添加动效?
.nu_modal {
visibility: hidden;
opacity: 0;
transition: opacity 200ms, visibility 200ms;
}
.nu_modal[open] {
visibility: visible;
opacity: 1;
transition: opacity 200ms;
}
NPM CDN
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-modal/lib/index.min.css" />
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-modal/lib/_/mask.min.css">
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-modal/lib/_/modal.min.css">