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

Name Type Default Detail title string 'Message' text string null theme string 'default' Theme you want to use. It only provides default theme now. You can write your own theme by referencing 'css/x0popup.default.css' overlay bool true Show the overlay or not. width string '90%' height string '50%' maxWidth string '450px' maxHeight string '200px' type string '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. icon string null Value list: ok, warning, info, error, custom. You should also set iconURL if this value is custom. iconURL string null Effective only when icon is cusotm. inputType string null Value list: text, password. inputValue string null Default value in the input. inputPlaceholder string null inputColor string null inputValidator function null [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. inputPromise function null Similiar to inputValidator, but you need to return a Promise. Refer to upper example. showCancelButton bool null If the value is set, it will explicitly implies the cancel button appearance without regard to type. But buttons will overwrite this configuration. buttons array null An array of single buttons. Check single button structure for more information. autoClose integer null The popup will close in set time. (ms) html bool false If false, html tags will be encoded before adding to the popup. animation bool true animationType string 'pop' Value list: pop, slideUp, slideDown, fadeIn. Effective only when animation is true. overlayAnimation bool true Set it to false will help if you want to show several popups with overlay continuously. keyResponse bool true If 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. showButtonOutline bool false If true, buttons will show an outline when tabbing. buttonTextOk string OK Default text for the last button of ok, error and info popup. buttonTextConfirm string Confirm Default text for the last button of warning popup. buttonTextCancel string Cancel Default text for the cancel button. buttonTextDefault string Button Default text for button. callback function null [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.