Pretty Animated Popup JavaScript Library – x0popup

Just another JavaScript popup library which creates animated, good-looking and highly customizable popup windows to replace the native alert, confirm, prompt dialog boxes.

How to use it:

Download and include the x0popup’s JavaScript & Stylesheet files on the html page.

<link href="dist/x0popup.min.css" rel="stylesheet">
<script src="dist/x0popup.min.js"></script>

Create a basic ‘info’ popup box.

// x0p(title, text, type);
x0p('Message', 'Hello world!', 'info');

Create a basic confirmation dialog box.

x0p('Confirmation', 'Are you sure?', 'warning');

Create a prompt dialog box with an input field.

x0p('Enter Your Name', null, 'input',
  function(button, text) {
      if(button == 'info') {
          x0p('Congratulations', 
              'Your name is ' + text + '!', 
              'ok', false);
      }
      if(button == 'cancel') {
          x0p('Canceled', 
              'You canceled input.',
              'error', false);
      }
  });

Valid API methods:

x0p(title, text, type, callback);
x0p(title, text, type, overlayAnimation);
x0popup({parameters}, callback);

All available parameters.

x0popup({
  // title
  title: 'Message',
  // custom text
  text: null,
  // custom theme
  theme: 'default',
  // shows background overlay
  overlay: true,
  // height / width
  width: '90%',
  height: '50%',
  maxWidth: '450px',
  maxHeight: '200px',
  // text, input, ok, warning, info, error
  type: 'text',
  // custom icon
  icon: null,
  // icon url
  iconURL: null,
  // text, password
  inputType: null,
  // Default value in the input.
  inputValue: null,
  // input placeholder
  inputPlaceholder: null,
  // input color
  inputColor: null,
  //  Parameters: button, value.
  // Return a string implies there exists an error. 
  // If the value passed validation, just return null. 
  // Notice: cancel button will not trigger this function.
  inputValidator: null,
  // shows cancel button
  showCancelButton: null,
  // array of single buttons.
  buttons: null,
  // auto close after x ms
  autoClose: null,
  // If false, html tags will be encoded before adding to the popup.
  html: false,
  // enable animation
  animation: true,
  // pop, slideUp, slideDown, fadeIn
  animationType: 'pop',
  // show several popups with overlay continuously
  overlayAnimation: true
  
}, callback);