与框架无关的小型模态javascript库 - EasyModal
栏目分类:模态 / 弹出窗口   发布日期:2021-09-17   浏览次数:

一个简单、轻量级、零依赖的模态 JavaScript 库,兼容任何第三方框架,如 Tailwind、Bulma、Bootstrap 等。

使用:

1. 导入 EasyModal 的 JavaScript 和样式表。

<link rel="stylesheet" href="assets/styles/EasyModal/EasyModal.css">
<script type="module">
  import EasyModal from './assets/scripts/EasyModal/EasyModal.js'
</script>

2. 将模态标记添加到您的页面。请注意,根据您使用的框架,不带“easy-modal”的 CSS 类是可选类。

<div class="my-easy-modal easy-modal easy-modal--fade">
  <div class="easy-modal__content p-4 rounded-sm">
    <h1>您真的要删除此记录吗?</h1>
    <div class="mt-8 grid grid-cols-2 gap-4">
      <div>
        <button class="close-my-easy-modal w-full px-4 py-2 bg-gray-200 rounded-sm text-sm font-medium">取消</button>
      </div>
      <div>
        <button class="w-full px-4 py-2 bg-blue-600 rounded-sm text-sm font-medium text-white">确定, 删除</button>
      </div>
    </div>
  </div>
</div>

3. 创建 EasyModal 的新实例。

const myEasyModal = new EasyModal({
      el: '.my-easy-modal',
      close: '.close-my-easy-modal' // 关闭元素
})

4. 切换模态窗口。

// 启动库
myEasyModal.start();
  
// 启动模态
myEasyModal.open();
  
//关闭模态
myEasyModal.close();

5. 启用按钮以启动模态。

<button class="open-my-easy-modal">
  打开 EasyModal 
</button>

6.防止模态窗口通过点击外部关闭。

const myEasyModal = new EasyModal({ 
      el: '.my-easy-modal', 
      open: '.open-my-easy-modal'
      close: '.close-my-easy-modal'
})

7. 在模态启动和关闭时触发功能。

const myEasyModal = new EasyModal({
      el: '.my-easy-modal',
      close: '.close-my-easy-modal',
      beforeOpen: () => console.log('before open'),
      beforeClose: () => console.log('before close')
})

官方网站:https://github.com/wesleylopex/EasyModal

相关热词: EasyModal

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