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

NeoPopup - Modul Popup Moden

Linda Hamilton
Lepaskan: 2025-01-04 19:15:39
asal
277 orang telah melayarinya

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
Salin selepas log masuk
Salin selepas log masuk

Sertakan fail JavaScript dalam projek anda:

<script src="path/to/developmentPopup.js"></script>
Salin selepas log masuk
Salin selepas log masuk

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'),
});
Salin selepas log masuk

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
Salin selepas log masuk
Salin selepas log masuk

Contoh dengan Mod Gigih

<script src="path/to/developmentPopup.js"></script>
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:dev.to
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan