Simple Clean Popup Box In Vanilla JavaScript – Creativa

Category: Javascript , Modal & Popup | February 17, 2021

0 Comment

Demo Download

AUTHOR:	molloeduardo
VIEWS TOTAL:	16 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	February 17, 2021
LICENSE:	MIT

---

Preview:

Description:

Creativa is a lightweight, easy-to-use, customizable, responsive popup box written in native (Vanilla) JavaScript.

More Features:

• Custom title, text, icon, and image.
• Allows multiple popups.
• Open/close animations.
• Custom position & size.
• AJAX content is supported as well.
• Click outside to dismiss.
• ESC to close popups.

How to use it:

1. Download and include the Creativa Popup’s JavaScript on the page.

<script src="creativa-popup.js"></script>

2. Create a basic popup box.

popup('Popup Title', 'Popup Message');

3. Add an icon to the popup box.

popup('Popup Title', 'Popup Message', 'info');
popup('Popup Title', 'Popup Message', 'success');
popup('Popup Title', 'Popup Message', 'error');
// or a custom image
popup('Popup Title', 'Popup Message', 'danger.png');

4. Add a header image to the popup box.

popup('Popup Title', 'Popup Message', 'info', 'image.jpg');

5. Insert HTML content to the popup box.

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  content: '<p>Any Content Here</p>'
});

6. Or load content from another page.

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  content: 'external.html', 
  isPage: true
});

7. Customize the size of the popup box.

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  width: '400px', 
  height: '300px'
});

8. Determine the position of the popup box.

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

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

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  position: '200px'
});

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  position: '5rem'
});

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  position: '30%'
});

9. Determine the show/hide 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 box that can 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
});

16. Customize the font family.

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  fontFamily: 'sans-serif'
});

17. Customize the box shadow.

popup('Popup Title', 'Popup Message', 'info', 'image.jpg',{
  boxShadow: '0px 6px 12px 2px #222'
});

18. Determine whether to show the close button.

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

19. API methods.

// cloose a popup
CreativaPopup.close(popupID);

// close all
CreativaPoup.closeAll();

20. Execute a function when the popup is closed.

document.addEventListener('onPopupClose', function (e) { 
  console.log('Popup closed ID: ' + e.detail); 
});

Changelog:

02/17/2021

• ClosePopup method renamed to close.
• Bugfix.

02/16/2021

• Popup close event listener
• CSS bugfix

12/24/2020

• Console.log removed

v0.2 (12/19/2020)

• Code refactoring.
• Added boxShadow option.
• Added closeAll method.
• Bug fix

11/01/2020

• ESC button to close the popup

08/13/2020

• Responsive improvements

06/28/2020

• Added Animation speed option

06/27/2020

• Card top, card bottom animations

06/26/2020

• Replaced closing button icon with CSS

06/25/2020

• Added Closing timer.
• Added No background option.

06/24/2020

• Bugfix

06/01/2020

• Allows you to customize the border radius.

05/29/2020

• Fix popup position parameter

05/09/2020

• Faster animations.