PopupPro JS 模块

PopupPro - 可定制的弹出库？

存储库： PopupPro ？

描述：

PopupPro 是一个现代的、高度可定制的 JavaScript 库，旨在增强用户与多功能且时尚的弹出窗口的交互。它以其广泛的功能集超越了传统的弹出库，包括灵活的配置、流畅的动画和丰富的样式选项。无论您需要简单的警报还是带有各种按钮的复杂模式，PopupPro 都提供了一种直观的方法来为您的 Web 应用程序创建引人入胜且具有视觉吸引力的弹出窗口。 ✨

---

特征 ？

1. 可自定义选项：

   • 标题和消息：轻松设置弹出窗口的标题和消息。 ？
   • 背景颜色和文本颜色：完全可定制的颜色，打造量身定制的外观。 ？
   • 尺寸和样式：可调节宽度、高度和边框半径以匹配您的设计。 ？
   • 关闭按钮：包含或排除关闭按钮的选项。 ❌

2. 动画支持：

   • 内置动画：从预定义的动画中进行选择，例如弹跳，或创建自定义动画。 ？
   • 动画持续时间：微调动画时间以获得流畅的体验。 ⏳

3. 按钮配置：

   • 多个按钮： 支持带有可自定义文本的多个按钮。 ？
   • 按钮样式： 使用不同的颜色、边框和悬停效果设置按钮样式。 ？
   • 按钮操作： 定义每个按钮的操作和重定向 URL。 ？

4. 响应灵敏且易于访问：

   • 响应式设计：专为在各种屏幕尺寸和设备上正常工作而设计。 ??
   • 辅助功能：焦点管理和覆盖点击处理以提高辅助功能。 ♿

5. 错误处理：

   • 错误报告：带有控制台日志记录和警报的内置错误处理。 ⚠️

---

PopupPro 如何脱颖而出？

1。广泛的定制： 与许多弹出库不同，PopupPro 允许对弹出窗口的几乎每个方面进行精细控制，包括动画类型、按钮样式和整体设计。这种级别的自定义可确保您的弹出窗口可以无缝地适应任何设计。

2。动画灵活性： 虽然许多弹出模块提供基本的淡入/淡出动画，但 PopupPro 支持各种动画，包括自定义动画，以创建引人入胜的动态用户体验。您可以选择内置动画（例如弹跳）或定义自己的动画。

3。多功能按钮配置： PopupPro 支持多种不同配置的按钮。每个按钮都可以有自己的文本、样式、操作和可选的重定向 URL，从而可以在单个弹出窗口中处理复杂的用户交互。

4。注重可访问性： PopupPro 通过焦点管理和覆盖点击处理等功能强调可访问性，确保您的弹出窗口可供所有人使用，包括残障用户。

5。错误处理和调试： 该库包括带有控制台日志记录和警报通知的全面错误处理，简化了调试过程并提高了可靠性。

6。干净而现代的设计： PopupPro 的默认样式是现代而干净的，提供开箱即用的专业外观。它还提供广泛的样式选项来满足您的特定设计需求。

7。响应式设计： PopupPro 旨在适应各种屏幕尺寸，确保您的弹出窗口在移动和桌面设备上看起来都很棒。

---

关于开发商?‍?

开发者： Mayank Chawdhari ?

Mayank Chawdhari 是一位专注且创新的 Web 开发人员，专注于创建优雅且用户友好的 Web 应用程序。凭借 JavaScript、CSS 和 PHP 方面的专业知识，Mayank 带来了对简洁代码和卓越用户体验的热情。 Mayank 以提供高质量解决方案和不断探索新技术而闻名，致力于推进 Web 开发领域并增强用户交互。 ??

---

用法 ？

1。包括图书馆：

从此存储库下载 PopupPro.js 或将其直接包含在您的项目中。将以下脚本标签添加到您的 HTML 文件中：

<script src="path/to/PopupPro.js"></script>

2。基本弹出示例：

向 HTML 添加一个按钮并使用 JavaScript 配置弹出窗口：

<button onclick="PopupPro.show({
    title: 'Login Authentication',
    message: 'Wrong password or username, Please try again',
    backgroundColor: '#333',
    textColor: '#fff',
    width: '400px',
    borderRadius: '20px',
    buttons: [
        {
            text: 'Retry',
            style: 'default',
            onClick: function() { console.log('Retry button clicked'); }
        },
        {
            text: 'Cancel',
            style: 'default',
            onClick: function() { console.log('Cancel button clicked'); }
        }
    ]
})">Show Popup</button>

3。配置选项：

• title：弹出窗口的标题。 ?️
• 消息：弹出窗口中显示的消息文本。 ?️
• backgroundColor：弹出容器的背景颜色。 ？
• textColor：文本的颜色。 ?️
• 宽度：弹出容器的宽度。 ？
• height：弹出容器的高度（可选）。 ？
• borderRadius：圆角的边框半径。 ？
• closeButton：显示或隐藏关闭按钮的布尔值。 ❌
• animationDuration：弹出动画的持续时间。 ⏳
• 动画：动画类型（例如，弹跳）。 ？
• buttons：按钮配置数组，包括文本、样式、单击操作和可选的重定向 URL。 ？

4。处理按钮操作：

每个按钮都可以配置文本、样式、onClick 函数和可选的重定向 URL。除非另有指定，否则单击按钮后弹出窗口将自动关闭。 ？

5。高级用法：

要自定义默认设置，请使用 setOptions 方法：

<script src="path/to/PopupPro.js"></script>

6。错误处理：

如果发生错误，它将被记录到控制台并显示在警报对话框中，以便快速调试。 ?️

---

贡献？

欢迎贡献！请打开问题、提交建议或创建拉取请求。有关详细指南，请参阅存储库中的 CONTRIBUTING.md 文件。 ？

---

执照 ？

该项目已获得 MIT 许可证的许可。有关更多详细信息，请参阅许可证文件。 ？

如需进一步支持或提出问题，请在 GitHub 存储库上提出问题。 ？

以上是PopupPro JS 模块的详细内容。更多信息请关注PHP中文网其他相关文章！