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.