javascript中的Bootstrap样式可访问模态窗口-minimodal
栏目分类:模态 / 弹出窗口   发布日期:2021-08-16   浏览次数:

使用纯 JavaScript 构建的最小、灵活、可配置、可访问的模态窗口。

受 Bootstrap 的 Modal 组件启发。

更多功能:

  • Bootstrap 的 Modal 组件启发。

  • 打开模态时模糊背景内容。

  • 页面上的多个模态实例。

  • 当模态打开时锁定页面。

  • 在外部单击时关闭模态。

  • 7 种 CSS3 动画:滑动、淡入淡出、缩放等。

使用:

1. 将accessible-minimodal.min.js 脚本插入HTML 页面,我们就可以开始了。

<script src="accessible-minimodal.min.js"></script>

2.向模态窗口添加内容如下。请务必将role="dialog"、aria-modal="true"和aria-labelledby属性添加到模态窗口以实现可访问性。

<div
  id="modal-example"
  aria-hidden="true"
  class="modal"
  style="display:none;">
  <div
    tabindex="-1"
    class="modal-wrapp">
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-open-btn-example"
      class="modal-body">
      <div class="modal-title">This is a modal</div>
      <button
        type="button"
        class="modal-close-btn close"
        aria-label="Close Modal"
        data-modal-close></button>
      <label aria-label="Input">
        <input type="text" placeholder="Input">
      </label>
      <label aria-label="Input">
        <input type="text" placeholder="Input">
      </label>
      <button>按键</button>
    </div>
  </div>
</div>

3. 创建一个按钮以在需要时启动模态。

<button id="modal-open-btn-example" data-modal-open="modal-example">打开 Modal</button>

4. 初始化模态库并完成。

const modal = AccessibleMinimodal.init({
      // 选项
})

5. 使用以下选项自定义模态窗口:

const modal = AccessibleMinimodal.init({
      // 默认 CSS 选择器
      classes: {
        modal: 'modal',
        wrapp: 'modal-wrapp',
        body: 'modal-body',
        active: 'active'
      },
      // 禁用页面滚动激活时
      disableScroll: true,
      // 在页面加载时自动将焦点移动到模态
      focus: true,
      hash: {
        open: false,
        add: false,
        remove: false
      },
      // 允许多个模态实例
      multiple: false,
      // 在外部点击时关闭模态关闭
      outsideClose: true,
      // 自定义样式
      style: {
        use: true,
        width: 400,
        valign: 'center', // center, top, bottom
        openAnimation: 'from-bottom', // // from-bottom, from-top, from-left, from-right, zoom-in, zoom-out, fade
        animationDuration: 400
      },
      // 触发器选择器
      triggers: {
        open: 'data-modal-open',
        close: 'data-modal-close'
      }
})

6. 事件处理程序。

const modal = AccessibleMinimodal.init({
      on: {
        beforeOpen: function (instance) {},
        afterOpen: function (instance) {},
        beforeClose: function (instance) {},
        afterClose: function (instance) {}
      },
})


官方网站:https://github.com/imhvost/accessible-minimodal

相关热词: Bootstrap模态窗minimodal

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库