Press "Enter" to skip to content

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *