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
Installation
Clone the repository or download the module files:
git clone https://github.com/BOSS294/NeoPopup.git
Include the JavaScript file in your project:
<script src="path/to/developmentPopup.js"></script>
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'),
});
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:
.DP-popup-content {
background: linear-gradient(135deg, #4a90e2, #2a3b4c);
}
Example with Persistent Mode
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:
- Fork the repository.
- Create your feature branch:
git checkout -b feature/AmazingFeature.
- Commit your changes:
git commit -m "Add some AmazingFeature".
- Push to the branch:
git push origin feature/AmazingFeature.
- 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.
