NeoPopup - The Modern 3D Popup Module
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:
`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.