ホームページ > ウェブフロントエンド > jsチュートリアル > NeoPopup - 最新のポップアップ モジュール

NeoPopup - 最新のポップアップ モジュール

Linda Hamilton
リリース: 2025-01-04 19:15:39
オリジナル
318 人が閲覧しました

NeoPopup は、洗練されたプロフェッショナルな Web インターフェイス向けに設計された、カスタマイズ可能で応答性の高い最新の 3D ポップアップ モジュールです。テーマ、アニメーション、カスタマイズのオプションを備えたこのモジュールを使用すると、Web サイトに魅力的なポップアップを簡単に追加できます。


特徴 ?

  • 3D ポップアップ デザイン: モダンな UI のための人目を引く 3D アニメーション。
  • カスタマイズ可能: テキスト、色、サイズ、テーマなどを簡単に調整できます。
  • 自動クローズ: カスタマイズ可能な期間を備えたオプションの自動クローズ機能。
  • 永続モード: ローカル ストレージを使用してユーザー設定を記憶します。
  • レスポンシブ: デバイスや画面サイズを問わずシームレスに動作します。
  • ライト/ダーク テーマ: テーマ選択の組み込みサポート。
  • 配置: 画面の隅にポップアップを表示します。

プレビュー?

NeoPopup - The Modern Popup Module


インストール?

リポジトリのクローンを作成するか、モジュール ファイルをダウンロードします:

git clone https://github.com/BOSS294/NeoPopup.git
ログイン後にコピー
ログイン後にコピー

プロジェクトに JavaScript ファイルを含めます:

<script src="path/to/developmentPopup.js"></script>
ログイン後にコピー
ログイン後にコピー

使用法 ?

基本的な例

developmentPopup.init({
    title: "Welcome to NeoPopup!",
    body: "Thank you for exploring the modern 3D popup module.",
    buttonText: "Learn More",
    buttonCallback: () => window.open('https://github.com/BOSS294/NeoPopup', '_blank'),
});
ログイン後にコピー

利用可能なオプション

Option Type Default Description
title string "Under Development" Title of the popup.
body string "Oops!" Body content (HTML supported).
buttonText string "Check Latest Updates" Text for the main button.
buttonCallback function null Callback function for the main button click.
position string "bottom-right" Popup position: top-right, top-left, bottom-right, or bottom-left.
theme string "dark" Theme for the popup: dark or light.
colors object {} Custom colors: { background, text, button }.
size object {} Size options: { width, height }.
animation string "slide" Animation type.
autoClose boolean false Automatically close the popup.
closeDuration number 5000 Auto-close duration in milliseconds.
persistent boolean false Prevent popup from showing repeatedly using local storage.

スタイリング?

NeoPopup の組み込みスタイルを含めるには、次のことを確認してください:

  • DP-popup-wrapper div は HTML に含まれています。
  • NeoPopup には、3D アニメーションシャドウ効果、およびカスタマイズ可能なテーマが付属しています。

デザインをさらにカスタマイズするには、含まれている CSS を変更します。

git clone https://github.com/BOSS294/NeoPopup.git
ログイン後にコピー
ログイン後にコピー

永続モードの例

<script src="path/to/developmentPopup.js"></script>
ログイン後にコピー
ログイン後にコピー

貢献していますか?

貢献はいつでも大歓迎です!ご協力いただける方法は次のとおりです:

  1. リポジトリをフォークします。
  2. 機能ブランチを作成します: git checkout -b feature/AmazingFeature。
  3. 変更をコミットします: git commit -m "Add some AmazingFeature"。
  4. ブランチにプッシュします: git Push Origin feature/AmazingFeature。
  5. プルリクエストを開きます。

サポート ?

クエリや機能リクエストについては:

  • メール: Mayankchawdhari@gmail.com
  • GitHub の問題: NeoPopup の問題

ライセンス?

このプロジェクトは MIT ライセンスに基づいてライセンスされています。詳細については、LICENSE ファイルを参照してください。


Mayank Chawdhari による ❤️ を使用して開発されました。 ?

以上がNeoPopup - 最新のポップアップ モジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート