@_nu/css-modal 中文文档教程

发布于 4年前 浏览 26 项目主页 更新于 3年前

css-modal

npm packagenpm downloadsgithub

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">
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文