Have ideas to improve npm?Join in the discussion! »

    @_nu/css-modal

    0.0.6 • Public • Published

    css-modal

    npm package npm downloads github

    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">

    Install

    npm i @_nu/css-modal

    DownloadsWeekly Downloads

    1

    Version

    0.0.6

    License

    MIT

    Unpacked Size

    5.92 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar
    • avatar