NeoPopup - The Modern 3D Popup Module

posted 2 min read

NeoPopup - The Modern 3D Popup Module

Version
License
Developer

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

image


Installation

Clone the repository or download the module files:
`bash
git clone https://github.com/BOSS294/NeoPopup.git
`

Include the JavaScript file in your project:
`html

`


Usage

Basic Example

`javascript
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'),

});
`


Available Options

| Option | Type | Default | Description |
|------------------|---------------|----------------------|-----------------------------------------------------------------------------|
| title | string | "Under Development"| Title of the popup. |
| body | string | "<strong>Oops!</strong>"| 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:
`css
.DP-popup-content {

background: linear-gradient(135deg, #4a90e2, #2a3b4c);

}
`


Example with Persistent Mode

`javascript
developmentPopup.init({

title: "We Value Your Feedback",
body: "Click below to share your thoughts!",
buttonText: "Give Feedback",
buttonCallback: () => alert('Thank you!'),
persistent: true,

});
`


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: [*Emails are not allowed*](mailto:Emails are not allowed)
- GitHub Issues: NeoPopup Issues


License

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


Developed with ❤️ by Mayank Chawdhari.

If you read this far, tweet to the author to show them you care. Tweet a Thanks
This module looks amazing!  Can you explain a bit more about how the persistent mode works with local storage? Is there a way to reset the popup if needed (for example, after a specific time or action on the site)?

More Posts

Understanding Obfuscation In Javascript

Dhanush Nehru - Jan 12

How Open Source is Shaping My Journey as a Developer

Anuj Kumar Sharma - Jan 7

Unlocking the Power of Generators in JavaScript

Mubaraq Yusuf - Jan 4

How to Add a Clickable Visitor Counter to Your Website

Bridget Amana - Dec 30, 2024

Understanding "this" in JavaScript objects and functions.

Temi_lolu - Nov 30, 2024
chevron_left