https://github.com/boss294/neopopup
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.
https://github.com/boss294/neopopup
css html internal-development javascript javascript-applications js modernpopup module neopopup popup webdevelopment website
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/boss294/neopopup
- Owner: BOSS294
- Created: 2024-11-25T20:03:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-25T20:11:30.000Z (over 1 year ago)
- Last Synced: 2025-03-21T13:54:23.837Z (about 1 year ago)
- Topics: css, html, internal-development, javascript, javascript-applications, js, modernpopup, module, neopopup, popup, webdevelopment, website
- Language: HTML
- Homepage: https://boss294.github.io/NeoPopup/
- Size: 186 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NeoPopup - The Modern 3D Popup Module 🚀
[](https://github.com/MayankChawdhari/NeoPopup)
[](LICENSE)
[](https://github.com/MayankChawdhari)
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` | `"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:
```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**: [mayankchawdhari@gmail.com](mailto:mayankchawdhari@gmail.com)
- **GitHub Issues**: [NeoPopup Issues](https://github.com/BOSS294/NeoPopup/issues)
---
## License 📄
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
---
**Developed with ❤️ by [Mayank Chawdhari](https://github.com/BOSS294)**. 🚀