JavaScript简单而强大的模态库 - EinsModal
栏目分类:模态 / 弹出窗口   发布日期:2021-08-16   浏览次数:

EinsModal 是一个简单而强大且可定制的模态窗口库,它使用 vanilla JavaScript 库构建。

特征:

  • 响应式设计。

  • 黑暗与光明主题。

  • 50 个平滑的 CSS3 过渡。

  • 支持静态和动态内容。

  • 开发人员友好的 API 方法和事件。

EinsModal使用

1. 使用 NPM 安装和导入 EinsModal

# Yarn
$ yarn add eins-modal
 
# NPM
$ npm i eins-modal --save
// Stylsheet
import 'eins-modal/dist/css/eins-modal.min.css'
// JavaScript
import EinsModal from 'eins-modal';

2. 或者在 HTML 文档中加载以下 JavaScript & CSS 文件。

<link href="css/eins-modal.min.css" rel="stylesheet" />
<!-- 带动画 -->
<script src="js/eins-modal.min.js" defer></script>
<!-- 没有动画 -->
<script src="js/eins-modal-plain.min.js" defer></script>

3. 在文档准备好时初始化库。

EinsModal.init();


4. 模态窗口所需的 HTML 结构。

<div id="myModal" class="eins-modal">
  <div class="eins-modal-content">
    <!-- 关闭图标 -->
    <div class="eins-modal-close"></div>
    <!-- 你的模态内容 -->
    <p>一个模态窗口</p>
    <!-- 关闭按钮 -->
    <button class="eins-modal-close-button">OK</button>
  </div>
</div>

5. 要启用暗模式,只需将eins-modal-dark类添加到顶部容器。

<div id="myModal" class="eins-modal eins-modal-dark">
  ...
</div>

6.设置模态窗口的大小:

<div id="myModal" class="eins-modal eins-modal-sm">
  小
</div>
<div id="myModal" class="eins-modal eins-modal-lg">
  大
</div>
<div id="myModal" class="eins-modal eins-modal-xsm">
  超小
</div>

7. 创建一个触发按钮来切换模态窗口。完毕。

<button data-modal-id="myModal">启动</button>

8.自定义打开动画:

  • transition.fadeIn

  • transition.flipXIn

  • transition.flipYIn

  • transition.flipBounceXIn

  • transition.flipBounceYIn

  • transition.swoopIn

  • transition.whirlIn

  • transition.shrinkIn

  • transition.expandIn

  • transition.bounceIn(默认)

  • transition.bounceUpIn

  • transition.bounceDownIn

  • transition.bounceLeftIn

  • transition.bounceRightIn

  • transition.slideUpIn

  • transition.slideDownIn

  • transition.slideLeftIn

  • transition.slideUpBigIn

  • transition.slideDownBigIn

  • transition.slideLeftBigIn

  • transition.slideRightBigIn

  • transition.perspectiveUpIn

  • transition.perspectiveDownIn

  • transition.perspectiveLeftIn

  • transition.perspectiveRightIn

<button class="eins-modal-button"
        data-modal-id="myModal"
        data-modal-options="openTransition: transition.flipYIn; openDuration: 500;">
        启动
</button>

9.自定义关闭动画:

  • transition.fadeIn

  • transition.flipXOut

  • transition.flipYOut

  • transition.flipBounceXOut

  • transition.flipBounceYOut

  • transition.swoopOut

  • transition.whirlOut

  • transition.shrinkOut

  • transition.expandOut(默认)

  • transition.bounceOut

  • transition.bounceUpOut

  • transition.bounceDownOut

  • transition.bounceLeftOut

  • transition.bounceRightOut

  • transition.slideUpOut

  • transition.slideDownOut

  • transition.slideLeftOut

  • transition.slideUpBigOut

  • transition.slideDownBigOut

  • transition.slideLeftBigOut

  • transition.slideRightBigOut

  • transition.perspectiveUpOut

  • transition.perspectiveDownOut

  • transition.perspectiveLeftOut

  • transition.perspectiveRightOut

<button class="eins-modal-button"
        data-modal-id="myModal"
        data-modal-options="closeTransition: transition.whirlOut;closeDuration: 300;">
        启动
</button>

10、防止模态窗口通过点击外部关闭。

<button class="eins-modal-button"
        data-modal-id="myModal"
        data-modal-options="backdropClose: false;">
        启动
</button>

11.确定是否允许多个模态窗口。默认值:true。

<button class="eins-modal-button"
        data-modal-id="myModal"
        data-modal-options="multiple: false;">
        启动
</button>

12.确定是否等到下一个动作(打开或关闭)之后,再打开一个新的模态。默认值:false。

<button class="eins-modal-button"
        data-modal-id="myModal"
        data-modal-options="wait: true;">
        启动
</button>

13. API 方法。

var options = {
  openTransition: 'transition.bounceIn',
  openDuration: 400,
  closeTransition: 'transition.expandOut',
  closeDuration: 200,
  backdropClose: true,
  multiple: true,
  wait: false,
}
 
// 显示模态
document.getElementById('myModal').modal('show', options);
 
// 关闭模态
document.getElementById('myModal').modal('close', options);
 
// 切换模式
document.getElementById('myModal').modal('toggle', options);
 
// 添加触发按钮
window.einsModal.addButton(triggerOrId, modalId, options);
 
// 移除所有触发按钮
window.einsModal.removeButton(triggerOrId);
 
// 打开一个特定的模态
window.einsModal.open(modalElementOrId, options);
 
// 关闭当前模态窗口
window.einsModal.close(options);
 
// 设置和更新选项
modal.setDefaultOptions(options);
 
// 检查模态是否打开
window.einsModal.isOpen('myModal');
 
// 获取所有打开的模态窗口
window.einsModal.getOpenModals();
 
// 向目标元素添加模态函数
indow.einsModal.addModalFunction(modalOrId);

14. 事件。

document.getElementById('myModal')
.addEventListener('show.eins.modal', function(){
  // 做一些事情
})
.addEventListener('shown.eins.modal', function(){
  // 做一些事情
})
.addEventListener('hide.eins.modal', function(){
  // 做一些事情
})
.addEventListener('hidden.eins.modal', function(){
  // 做一些事情
})
.addEventListener('global.eins.modal', function(){
  // 做一些事情
})


官方网站:https://github.com/EinsCMS/eins-modal

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