x0p('Confirmation', 'Are you sure?', 'warning');A confirmation popup with a default icon.
弹出对话框An input popup with a callback function. 弹出对话框
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);
}
});Another way to call x0popup. 弹出对话框
x0p({
title: 'Custom Popup',
text: 'What is your choice?',
animationType: 'slideUp',
icon: 'custom',
iconURL: 'image/thinking.svg',
buttons: [
{
type: 'error',
text: 'First'
},
{
type: 'info',
text: 'Second'
}
]
}, function(button) {
x0p({
title: 'Your choice',
text: 'You clicked ' + button + ' button!',
overlayAnimation: false
});
});Auto close the popup after some time. 弹出对话框
x0p({
title: 'Auto Close',
text: 'This popup will auto close in 3 seconds.',
animationType: 'slideDown',
icon: 'info',
buttons: [],
autoClose: 3000
});Show a loading animation while executing. 弹出对话框
x0p({
title: 'Async Operation',
text: 'Try to do some operation.',
icon: 'info',
animationType: 'fadeIn',
buttons: [
{
type: 'cancel'
},
{
type: 'info',
text: 'Do It!',
showLoading: true
}
]
}, function(button) {
if(button == 'info') {
// Simulate Delay
setTimeout(function() {
x0p('Done', null, 'ok', false);
}, 1500);
}
});Placeholder, validator, etc. 弹出对话框
x0p({
title: 'Number Check',
type: 'warning',
inputType: 'text',
inputPlaceholder: 'Number Only',
inputColor: '#F29F3F',
inputValidator: function(button, value) {
if(value == '' || isNaN(value))
return 'Not a number!';
return null;
}
}, function(button, text) {
if(button == 'warning') {
x0p('Congratulations',
'Your number is ' + text + '!',
'ok', false);
}
});