Simple Popup Box In Vanilla JavaScript | Creativa – Popup

Vanilla JS Popup – This 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.

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: '
Any Content Here
'
);

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:

• bubble
• card-left
• card-right
• newspaper
• unfold

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. Default: false.

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  timer: true
});

14. Enable/disable background. Default: false.

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  noBackground: true
});

15. Customize the animation speed in ms. Default: 100ms.

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  animationSpeed: 600
});

Most Popular Plugins, Javascript Popup Window onClick, Simple Clean Popup Box In Vanilla JavaScript

Changelog:

06/28/2020

• Added Animation pace choice

06/27/2020

• Card high, card backside animations

06/26/2020

• Replaced closing button icon with CSS

06/25/2020

• Added Closing timer.
• Added No background choice.

06/01/2020

• Allows you to customize the border-radius.

05/29/2020

• Fix popup place parameter

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.