Home > Web Front-end > JS Tutorial > NeoPopup - The Modern Popup Module

NeoPopup - The Modern Popup Module

Linda Hamilton
Release: 2025-01-04 19:15:39
Original
277 people have browsed it

NeoPopup is a modern, customizable, and responsive 3D popup module designed for sleek and professional web interfaces. With options for themes, animations, and customization, this module makes adding a stunning popup to your website effortless.


Features ?

  • 3D Popup Design: Eye-catching 3D animations for modern UI.
  • Customizable: Easily adjust text, colors, size, theme, and more.
  • Auto-Close: Optional auto-close functionality with customizable duration.
  • Persistent Mode: Remember user preferences using local storage.
  • Responsive: Works seamlessly across devices and screen sizes.
  • Light/Dark Themes: Built-in support for theme selection.
  • Positioning: Display popups at any corner of the screen.

Preview ?

NeoPopup - The Modern Popup Module


Installation ?

Clone the repository or download the module files:

git clone https://github.com/BOSS294/NeoPopup.git
Copy after login
Copy after login

Include the JavaScript file in your project:

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

Usage ?

Basic Example

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

Available Options

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.

Styling ?

To include NeoPopup's built-in styling, ensure the following:

  • The DP-popup-wrapper div is included in your HTML.
  • NeoPopup comes with 3D animations, shadow effects, and customizable themes.

To customize the design further, modify the included CSS:

git clone https://github.com/BOSS294/NeoPopup.git
Copy after login
Copy after login

Example with Persistent Mode

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

Contributing ?

Contributions are always welcome! Here's how you can help:

  1. Fork the repository.
  2. Create your feature branch: git checkout -b feature/AmazingFeature.
  3. Commit your changes: git commit -m "Add some AmazingFeature".
  4. Push to the branch: git push origin feature/AmazingFeature.
  5. Open a pull request.

Support ?

For any queries or feature requests:

  • Email: mayankchawdhari@gmail.com
  • GitHub Issues: NeoPopup Issues

License ?

This project is licensed under the MIT License. See the LICENSE file for details.


Developed with ❤️ by Mayank Chawdhari. ?

The above is the detailed content of NeoPopup - The Modern Popup Module. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template