Pretty Animated Popup JavaScript Library – x0popup

Category: Javascript , Modal & Popup , Recommended | July 13, 2016
Author: gao-sun
Views Total: 4,126
Official Page: Go to website
Last Update: July 13, 2016
License: MIT

Preview:

Pretty Animated Popup JavaScript Library – x0popup

Description:

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);

You Might Be Interested In:


4 thoughts on “Pretty Animated Popup JavaScript Library – x0popup

  1. Lahiru SupunChandra.

    Nice one. I use this. but i have a some problem. Can you help me solve this problem ?. My problem is I want do some changes for popup content. I want include html tags for

    x0p({
    title: ”,
    text: ‘ ? ‘,

    “Title” tag. I’m trying and I can’t do it. Actually I want change popup content. I used “Demo – 5”. Anyone help me please. very appreciate.

    Thanks,
    Lahiru

    Reply
    1. Gao

      Hi buddy!

      I’m the author of this repo. Did you mean you want to use html tags in popup’s content? You can set parameter ‘html’ to ‘true’ for disable encoding. If you have any other questions, please send me an email or leave an issue on Github.

      Thanks,
      Gao

      Reply

Leave a Reply