Vanilla JS Popup is a simple library that allows you to create great popups for importing just one JavaScript file. Creativa is a light-weight, easy-to-use, customizable, responsive popup field written in native (Vanilla) JavaScript.
More Features:
- Custom title, textual content, icon, and picture.
- Allows a number of popups.
- Open/close animations.
- Custom place & dimension.
- AJAX content material is supported as effectively.
- Click outdoors to dismiss.
How to make use of it:
1. Download and embody the Creativa Popup’s JavaScript on the web page.
<script src="creativa-popup.js"></script>
2. Create a fundamental popup field.
popup('Popup Title', 'Popup Message');
3. Add an icon to the popup field.
popup('Popup Title', 'Popup Message', 'info'); popup('Popup Title', 'Popup Message', 'success'); popup('Popup Title', 'Popup Message', 'error'); // or a customized image popup('Popup Title', 'Popup Message', 'danger.png');
4. Add a header picture to the popup field.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg');
5. Insert HTML content material to the popup field.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg', content: '<p>Any Content Here</p>' );
6. Load content material from one other web page.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg',);
7. Customize the dimensions of the popup field.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg',);
8. Determine the place of the popup field.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg',); popup('Popup Title', 'Popup Message', 'info', 'image.jpg',); popup('Popup Title', 'Popup Message', 'info', 'image.jpg',); popup('Popup Title', 'Popup Message', 'info', 'image.jpg',); popup('Popup Title', 'Popup Message', 'info', 'image.jpg', position: '30%' );
9. Determine the present/conceal animations:
popup('Popup Title', 'Popup Message', 'info', 'image.jpg', openAnimation: 'card-left', closeAnimation: 'card-right' );
10. Create a STICKY popup field that may not be closed.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{ isBlocked: true });
11. Customize the colors.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{ bgColor: '#fff', titleColor: '#404040', textColor:'#606060' });
12. Customize the border-radius.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{ borderRadius: '3px' });
13. Display a countdown timer.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{ timer: true });
14. Enable/disable background.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{ noBackground: true });
15. Customize the animation speed in ms.
popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{ animationSpeed: 600 });
Most Popular Plugins, Javascript Popup Window onClick, Simple Clean Popup Box In Vanilla JavaScript
See Demo And Download
Official Website(molloeduardo): Click Here
This superior jQuery/javascript plugin is developed by molloeduardo. For extra Advanced Usages, please go to the official website.