x0popup
- An alternative to original alert, confirm and prompt -
Bored with the original javascript alert? Now is the time to try something new!
Alert
x0p('Message', 'Hello world!');

The most simple one.

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

A confirmation popup with a default icon.

POP
Prompt

An input popup with a promise.    POP

// I strongly recommend to use Promise
// instead of a callback since v0.3.0
x0p('Enter Your Name', null, 'input').then(
    function(data) {
        if(data.button == 'info') {
            x0p('Congratulations', 
                'Your name is ' + data.text + '!', 
                'ok', false);
        }
        if(data.button == 'cancel') {
            x0p('Canceled', 
                'You canceled input.',
                'error', false);
        }
    });
Get x0popup
npm install x0popup

Install via npm

bower install x0popup

Install via bower

Or just download files from https://github.com/gao-sun/x0popup

Want more? Here we go!
Custom Popup

Another way to call x0popup.    POP

x0p({
    title: 'Custom Popup',
    text: 'What is your choice?',
    animationType: 'slideUp',
    icon: 'custom',
    iconURL: 'image/thinking.svg',
    showButtonOutline: true,
    buttons: [
        {
            type: 'error',
            key: 49,
            text: 'First',
            default: true
        },
        {
            type: 'info',
            key: 50,
            text: 'Second'
        }
    ]
}).then(function(data) {
    x0p({
        title: 'Your choice', 
        text: 'You clicked ' + data.button + ' button!',
        overlayAnimation: false
    });
});
Auto Close

Auto close the popup after some time.    POP

x0p({
    title: 'Auto Close',
    text: 'This popup will auto close in 3 seconds.',
    animationType: 'slideDown',
    icon: 'info',
    buttons: [],
    autoClose: 3000
});
Async Operation

Show a loading animation while executing.    POP

x0p({
    title: 'Async Operation',
    text: 'Try to do some operation.',
    icon: 'info',
    animationType: 'fadeIn',
    buttons: [
        {
            type: 'cancel'
        },
        {
            type: 'info',
            text: 'Do It!',
            showLoading: true
        }
    ]
}).then(function(data) {
    if(data.button == 'info') {
        // Simulate Delay
        setTimeout(function() {
            x0p('Done', null, 'ok', false);
        }, 1500);
    }
});
Advanced Input

Placeholder, validator, etc.    POP

x0p({
    title: 'Number Check',
    type: 'warning',
    inputType: 'text',
    inputPlaceholder: 'Number Only',
    inputColor: '#F29F3F',
    inputPromise: function(button, value) {
        var p = new Promise(function(resolve, reject) {
            if(value == '' || isNaN(value))
                resolve('Not a number!');
            resolve(null);
        });
        return p;
    }
}, function(button, text) {
    if(button == 'warning') {
        x0p('Congratulations', 
            'Your number is ' + text + '!', 
            'ok', false);
    }
});
Usage

x0p/x0popup are both supported.

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

// Callback is supported but not recommended
x0p(title, text, type, callback);
x0popup({parameters}, callback);
Parameter Table
NameTypeDefaultDetail
titlestring'Message'
textstringnull
themestring'default'Theme you want to use. It only provides default theme now. You can write your own theme by referencing 'css/x0popup.default.css'
overlaybooltrueShow the overlay or not.
widthstring'90%'
heightstring'50%'
maxWidthstring'450px'
maxHeightstring'200px'
typestring'text'Value list: text, input, ok, warning, info, error. You can simplely change this value to get an in-built setting. But other configurations may overwrite it.
iconstringnullValue list: ok, warning, info, error, custom. You should also set iconURL if this value is custom.
iconURLstringnullEffective only when icon is cusotm.
inputTypestringnullValue list: text, password.
inputValuestringnullDefault value in the input.
inputPlaceholderstringnull
inputColorstringnull
inputValidatorfunctionnull[NOT RECOMMEND] Parameters: button, value. Check button value list for more information. Return a string implies there exists an error. If the value passed validation, just return null. Notice: cancel button will not trigger this function.
inputPromisefunctionnullSimiliar to inputValidator, but you need to return a Promise. Refer to upper example.
showCancelButtonboolnullIf the value is set, it will explicitly implies the cancel button appearance without regard to type. But buttons will overwrite this configuration.
buttonsarraynullAn array of single buttons. Check single button structure for more information.
autoCloseintegernullThe popup will close in set time. (ms)
htmlboolfalseIf false, html tags will be encoded before adding to the popup.
animationbooltrue
animationTypestring'pop'Value list: pop, slideUp, slideDown, fadeIn. Effective only when animation is true.
overlayAnimationbooltrueSet it to false will help if you want to show several popups with overlay continuously.
keyResponsebooltrueIf true, you can use tab for selecting and space for clicking, and also can configure specific key in buttons. If you use an in-built setting spicified by type, ESC will trigger cancel and Enter will triiger another one.
showButtonOutlineboolfalseIf true, buttons will show an outline when tabbing.
buttonTextOkstringOKDefault text for the last button of ok, error and info popup.
buttonTextConfirmstringConfirmDefault text for the last button of warning popup.
buttonTextCancelstringCancelDefault text for the cancel button.
buttonTextDefaultstringButtonDefault text for button.
callbackfunctionnull[NOT RECOMMEND] Parameters: button, text. Check button value list for more information. text will be value of the input if type is input or inputType is not null.
Promise

x0popup will just fire resolve(i.e. fulfilled), and pass an object with three properties button, text and close(Call this function to close the popup manually).

Button Value List

Value list: ok, warning, info, error, cancel, timeout. Except timeout is triggered by auto close timer, other values are triggered by user click.

Single Button Structure

An single button is an object consists of several properties. Below is the property table.

NameTypeDefaultDetail
typestringnullValue list: ok, warning, info, error, cancel.
textstringnullIf null, the text on the button will set to default value regarding to type.
keyintegerundefinedEffective only when keyResponse is true. Implies which key will trigger this button. You can find key codes on keycode.info or css-tricks.
defaultboolundefinedIf true, the button will be the default tab stop. If no default value is specified, x0popup will choose the last button.
showLoadingboolundefinedIf true, the popup will show a loading animation instead of directly close itself when the button is clicked.
User Function

You can change default configurations by calling setDefault().

x0p.setDefault({
    parameter: value
});
Contact

If you find any bugs or have any advices, please leave an issue on Github, or directly send an email to gao.sun[at]my.com. Thank you.