Author: | gutuJosh |
---|---|
Views Total: | 249 views |
Official Page: | Go to website |
Last Update: | December 30, 2019 |
License: | MIT |
Preview:

Description:
A fancy and versatile popup plugin to create animated, customizable modal windows & dialog boxes on the page.
Features:
- Dark & light backdrops.
- Can be used as info/warning/alert/success alert dialogs.
- Supports any modal content. Not only images & text.
- 8 awesome transition effects.
- Custom action buttons.
How to use it:
1. Download and load the fancy-modal’s files in the document.
<link href="fancy-modal.css" rel="stylesheet" /> <script src="fancy-modal.js"></script>
2. Create a new fancy modal instance.
let modal = new FancyModal({ 'content': 'HTML Content Here' }); // or let modal = new FancyModal({ 'message': 'HTML Content Here' });
3. Open the modal when needed.
modal.open();
4. Display an image in the modal.
let modal = new FancyModal({ 'modalType': 'image', 'imageSrc': '1.jpg', });
5. Determine the modal type.
- info
- warning
- alert
- success
let modal = new FancyModal({ 'modalType': 'alert', 'message': 'This is an alert message' });
6. Create a confirmation dialog.
let modal = new FancyModal({ 'buttonAction' : () => alert('You clicked "Delete" buton!'), 'title':'<h3>WARNING!</h3>', 'message':'Are you shure you want to delete this post?', 'okBtnTxt':'Delete', 'koBtnTxt':'Cancel' });
7. All possible transition effects:
- fade-and-zoom
- fade-and-slide-down (default)
- fade-and-slide-left
- fade-and-slide-right
- fade-and-slide-up
- fade-and-bounce-in
- flip-card
- flip-card-drop-down
let modal = new FancyModal({ 'modalType': 'image', 'imageSrc': '1.jpg', 'className': 'fade-and-bounce-in' });
8. All default configuration options.
let modal = new FancyModal({ modalType:'info', className: 'fade-and-slide-down', content: "", title:false, message:false, maxWidth: 600, minWidth: 300, overlay: 'dark', // or lightbox buttonAction: false, okBtnTxt: 'Continue', koBtnTxt: 'Cancel' });