jquery-alertable是一款简单实用的jQuery确认框和警告框插件。该插件可用于替代浏览器原生的确认框、警告框和提示框。
安装
可以通过npm来安装jquery-alertable插件。
npm install --save @claviska/jquery-alertable
使用方法
alerts警告框
警告框的调用方法如下:
// Basic example
$.alertable.alert('Howdy!');
// Example with action when the modal is dismissed
$.alertable.alert('Howdy!').always(function() {
// Modal was dismissed
});
confirmations确认框
确认框的调用方法如下:
// Basic example
$.alertable.confirm('You sure?').then(function() {
// OK was selected
});
// Example with then/always
$.alertable.confirm('You sure?').then(function() {
// OK was selected
}, function() {
// Cancel was selected
}).always(function() {
// Modal was dismissed
});
prompts提示框
提示框的调用方法如下:
// Basic example
$.alertable.prompt('How many?').then(function(data) {
// Prompt was submitted
});
// Example with then/always
$.alertable.prompt('How many?').then(function(data) {
// Prompt was submitted
}, function() {
// Prompt was canceled
}).always(function() {
// Modal was dismissed
});
配置参数
配置参数可以以对象的方式在第二个参数中传入:
$.alertable.alert('Howdy!', {
optionName: optionValue,
...
});
$.alertable.confirm('You sure?', {
optionName: optionValue,
...
});
$.alertable.prompt('How many?', {
optionName: optionValue,
...
});
可用的配置参数有:
container:模态窗口被添加的容器,默认是body。
html:你的信息是否包含HTML代码。默认为false。
cancelButton:取消按钮的HTML代码。默认为:
Cancel
okButton:OK按钮的HTML代码。默认为:
OK
overlay:遮罩层的HTML代码。默认为:
prompt:提示框主体的HTML代码。在这个HTML中的所有元素在提交时它们的值都会被返回。默认为:
modal:模态窗口的HTML代码。默认为:
hide:隐藏模态窗口和遮罩层的函数。可以使用this.modal和this.overlay来引用模态窗口和遮罩层。默认为:
$(this.modal).add(this.overlay).fadeOut(100);
show:显示模态窗口和遮罩层的函数。可以使用this.modal和this.overlay来引用模态窗口和遮罩层。默认为:
$(this.modal).add(this.overlay).fadeIn(100);