Rumah >hujung hadapan web >tutorial js >NeoPopup - Modul Popup Moden

NeoPopup - Modul Popup Moden

Linda Hamilton
Linda Hamiltonasal
2025-01-04 19:15:39287semak imbas

NeoPopup ialah modul pop timbul 3D moden, boleh disesuaikan dan responsif yang direka untuk antara muka web yang anggun dan profesional. Dengan pilihan untuk tema, animasi dan penyesuaian, modul ini menjadikan penambahan pop timbul yang menakjubkan pada tapak web anda menjadi mudah.


ciri ?

  • Reka Bentuk Timbul Timbul 3D: Animasi 3D yang menarik perhatian untuk UI moden.
  • Boleh disesuaikan: Laraskan teks, warna, saiz, tema dan banyak lagi dengan mudah.
  • AutoTutup: Fungsi autotutup pilihan dengan tempoh boleh disesuaikan.
  • Mod Gigih: Ingat pilihan pengguna menggunakan storan setempat.
  • Responsif: Berfungsi dengan lancar merentas peranti dan saiz skrin.
  • Tema Terang/Gelap: Sokongan terbina dalam untuk pemilihan tema.
  • Kedudukan: Paparkan pop timbul di mana-mana sudut skrin.

Pratonton ?

NeoPopup - The Modern Popup Module


Pemasangan ?

Klon repositori atau muat turun fail modul:

git clone https://github.com/BOSS294/NeoPopup.git

Sertakan fail JavaScript dalam projek anda:

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

penggunaan ?

Contoh Asas

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'),
});

Pilihan yang Tersedia

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.

Menggayakan ?

Untuk memasukkan penggayaan terbina dalam NeoPopup, pastikan perkara berikut:

  • Div pembungkus pop timbul DP disertakan dalam HTML anda.
  • NeoPopup disertakan dengan animasi 3D, kesan bayang dan tema yang boleh disesuaikan.

Untuk menyesuaikan reka bentuk dengan lebih lanjut, ubah suai CSS yang disertakan:

git clone https://github.com/BOSS294/NeoPopup.git

Contoh dengan Mod Gigih

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

Menyumbang?

Sumbangan sentiasa dialu-alukan! Begini cara anda boleh membantu:

  1. Fork repositori.
  2. Buat cawangan ciri anda: git checkout -b feature/AmazingFeature.
  3. Komit perubahan anda: git commit -m "Tambah beberapa AmazingFeature".
  4. Tekan ke cawangan: ciri asal git push/AmazingFeature.
  5. Buka permintaan tarik.

Sokongan ?

Untuk sebarang pertanyaan atau permintaan ciri:

  • E-mel: mayankchawdhari@gmail.com
  • Isu GitHub: Isu NeoPopup

lesen ?

Projek ini dilesenkan di bawah Lesen MIT. Lihat fail LESEN untuk mendapatkan butiran.


Dibangunkan dengan ❤️ oleh Mayank Chawdhari. ?

Atas ialah kandungan terperinci NeoPopup - Modul Popup Moden. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn