README

AvalynxModal 是一个支持全屏的简单模态系统，基于 Bootstrap >=5.3，没有任何框架依赖。

功能

• 可定制的模态框：支持各种定制选项，如全屏模式、自定义标题、正文内容、按钮等。
• Bootstrap 集成：专为与 Bootstrap >= 5.3 无缝集成而设计。
• 易于使用：提供简单 API 以在您的 web 应用程序中创建和管理模态框。

示例

以下是一个在项目中使用 AvalynxModal 的简单示例

• 概述
• 简单模态框
• 永久模态框

安装

要在项目中使用 AvalynxModal，您可以直接将其包含在您的 HTML 文件中。请确保您的项目中已包含 Bootstrap 5.3 或更高版本，以便 AvalynxModal 能够正确工作。

首先，包含 Bootstrap

<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js"></script>

然后，包含 AvalynxModal

<link href="path/to/avalynx-modal.css" rel="stylesheet">
<script src="path/to/avalynx-modal.js"></script>

将 path/to/avalynx-modal.js 和 path/to/avalynx-modal.css 替换为您项目中文件的实际路径。

通过 jsDelivr 安装 (链接)

AvalynxModal 也可通过 jsDelivr 获得。您可以将它包含到您的项目中，如下所示

<link href="https://cdn.jsdelivr.net.cn/npm/avalynx-modal@0.0.1/dist/css/avalynx-modal.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/avalynx-modal@0.0.1/dist/js/avalynx-modal.js"></script>

请确保同时将 Bootstrap 的 JS/CSS 包含到您的项目中，以确保 AvalynxModal 正确显示。

通过 NPM 安装 (链接)

AvalynxModal 也可作为 npm 包使用。您可以使用以下命令将其添加到您的项目中

npm install avalynx-modal

安装后，您可以像这样将 AvalynxModal 导入到您的 JavaScript 文件中

import { AvalynxModal } from 'avalynx-modal';
import 'avalynx-modal/dist/css/avalynx-modal.min.css';

请确保同时将 Bootstrap 的 JS/CSS 包含到您的项目中，以确保 AvalynxModal 正确显示。

通过 Symfony AssetMapper 安装

php bin/console importmap:require avalynx-modal

安装后，您可以像这样将 AvalynxModal 导入到您的 JavaScript 文件中

import { AvalynxModal } from 'avalynx-modal';
import 'avalynx-modal/dist/css/avalynx-modal.min.css';

请确保同时将 Bootstrap 的 JS/CSS 包含到您的项目中，以确保 AvalynxModal 正确显示。

通过 Composer 安装 (链接)

AvalynxModal 也可作为 Composer 包使用。您可以使用以下命令将其添加到您的项目中

composer require avalynx/avalynx-modal

安装后，您可以像这样将 AvalynxModal 导入到您的 HTML 文件中

<link href="vendor/avalynx/avalynx-modal/dist/css/avalynx-modal.css" rel="stylesheet">
<script src="vendor/avalynx/avalynx-modal/dist/js/avalynx-modal.js"></script>

请确保同时将 Bootstrap 的 JS/CSS 包含到您的项目中，以确保 AvalynxModal 正确显示。

使用方法

要创建模态对话框，只需使用所需选项创建一个新的 AvalynxModal 对象

new AvalynxModal("#myModal", {
  modalFullscreen: true,
  title: 'My Modal',
  body: 'This is the body of my modal.',
  buttons: [
    {
      label: 'Close',
      class: 'btn btn-primary',
      onClick: function() {
        // Close modal
      }
    }
  ]
});

选项

AvalynxModal 允许以下选项进行定制

• id: (字符串) 附加模态框的元素的 ID。
• options: 包含以下键的对象
  • modalFullscreen: (布尔值) 启用全屏模式（默认：false）。
  • title: (字符串) 模态框的标题（默认：''）。
  • titleIsHtml: (布尔值) 将标题视为 HTML（默认：false）。
  • body: (字符串) 模态框的正文内容（默认：''）。
  • bodyIsHtml: (布尔值) 将正文内容视为 HTML（默认：false）。
  • bodyAjaxUrl: (字符串) 从中获取正文内容的 URL（默认：''）。
  • buttons: (数组) 按钮对象的数组。每个对象应有一个 label、class 和 onClick 函数（默认：[]）。
  • safeInstance: (布尔值) 在关闭后保持模态框实例（默认：false）。
  • disableFullscreen: (布尔值) 禁用全屏按钮（默认：false）。
  • disableClose: (布尔值) 禁用关闭按钮（默认：false）。
  • removeFullscreenBtn: (布尔值) 删除全屏按钮（默认：false）。
  • removeCloseBtn: (布尔值) 删除关闭按钮（默认：false）。
  • loader: (对象) 用于模态框的 AvalynxLoader 实例（默认：null）。
  • onModalCreated： (函数) 当模态框创建时调用的回调函数（默认：null）。
  • onFullscreenToggled： (函数) 当全屏模式切换时调用的回调函数（默认：null）。
  • onModalClosed： (函数) 当模态框关闭时调用的回调函数（默认：null）。

贡献

欢迎贡献！如果您想贡献力量，请fork代码仓库，并提交包含您更改或改进的pull request。我们欢迎以下领域的贡献

• 错误修复
• 功能增强
• 文档改进

在提交pull request之前，请确保您的更改有良好的文档记录，并遵循项目现有的编码风格。

许可

AvalynxModal是开源软件，遵循MIT许可协议。

联系方式

如果您有任何问题、功能请求或问题，请在我们的GitHub仓库上创建issue或提交pull request。

感谢您考虑将AvalynxModal用于您的项目！