Simple Popup Box In Vanilla JavaScript | Creativa – Popup

Simple-Popup-Box-In-Vanilla

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.