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中文網其他相關文章！