html 警告框插件,简单实用的jQuery确认框和警告框插件

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