前面讲解了一些jQuery-confrim中的四个最基本的列子和一些简单的参数使用。这里将根据一些官方给出的列子进行实验和说明，拷贝就可以使用,但是前提是要像我第一篇模态框文章中提到当如css和js文件文件
实例1：带点击按钮的模态框
<script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
//演示实列1 警示框
$("#demo1").click(function(){
$.confirm({
title:'键盘绑定框',
content: '你可以在键盘上按下T,W,G任意键继续',
buttons: {
specialKey: {//这里是取消时候的相关参数
text: '取消按住c或者alt即可',
keys: ['c', 'alt'],//改变这里的值可以实现选择自己想使用的按钮
action: function(){
$.alert('你选择了取消按钮c或alt');
}
},
alphabet: {//这里是确定时候的相关参数
text: '确定',
keys: ['t', 'w','g'],//改变这里的值可以实现选择自己想使用的按钮
action: function(){
$.alert('你选怎了t,w,g任意字母选择了继续');
}
}
}
});
});
})
</script>
实例2 按钮和标题头可变颜色的确认框
$.confirm({
title: '可选颜色的模态框',
content: '可以选择的按钮颜色red,orange,blue,dark,blue',
type: 'green',//改变这里的颜色就可以实现改变模态框标题头的颜色
typeAnimated: true,
buttons: {
tryAgain: {
text: '确认框',//这里是文本标题的
btnClass: 'btn-orange',//这里可以通过改变btn后面的颜色达到改变按钮的颜色
action: function(){//这里是点击确定按钮后的的行为函数可以执行自己想实现的效果
$.alert("点击了确定")
}
},
close: function () {//这里是点击取消按钮后的的行为函数可以执行自己想实现的效果
$.alert("点击了取消")
}
}
});
实例3 带图标的模态框
<script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
//演示实列1 警示框
$("#demo1").click(function(){
$.confirm({
icon: 'fa fa-spinner fa-spin',
title: '图标框',
content: '改变icon中的图标就可改变相应的标题图标可以使用bootstrap中的图标也可使用自带的fa图标'
});
});
})
</script>
实例4 模态框的宽度以及是否可以拖动
<script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
//演示实列1 警示框
$("#demo1").click(function(){
//模态框默认是使用的bootstrap中的布局方式
$.confirm({
//方式1.这里使用的是bootstrap中的布局模式你可以根据自己需要的来进行调动
// columnClass: 'col-md-3 col-md-offset-4',
//方式2.这里如果要自己使用自定义宽度需要将bootstrap布局设定为false
useBootstrap: false,
boxWidth: '400px',//这里也可是用百分比的 方式实现
//这里将参数值改为false就不能够拖动，模态框默认可以拖动
draggable: true,
//dragWindowBorder设置为false就可以将窗口拖动到边框外，但前提是draggable参数变为true
dragWindowBorder: false,
});
});
})
</script>
实例5 模态框的延迟和动画
<script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
$("#demo1").click(function(){
//模态框默认是使用的bootstrap中的布局方式
$.confirm({
animation: 'zoom',//这里是设置模态框的出现时的动画
closeAnimation: 'Rotate',//这里是模态框关闭时候的动画
//可选动画还参数还有left,right,Rotate,top,bottom,scale
//rotateY,rotateX,rotateYR,rotateXR,none,opacity,zoom,scaleY,scaleX
//RotateX,RotateY,RotateXR,RotateYR,
animationBounce: 5.0,//这是设置动画出现时候的幅度
animationSpeed: 1500//这是设置动画出现和消失的速度
});
});
})
</script>
实例6 自定义动画,要使用自定义动画还要设置相关的css样式
<style type="text/css">
.jconfirm .jconfirm-box.hilight.jconfirm-hilight-random {
/*the animation name is bob*/
transform: translate3d(0,0,0);
animation: random 2s;
}
@keyframes random{
10%, 90% {
transform: rotate(-2deg);
}
20%, 80% {
transform: rotate(4deg);
}
30%, 50%, 70% {
transform: rotate(-8deg);
}
40%, 60% {
transform: rotate(8deg);
}
}
</style>
<script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
$("#demo1").click(function(){
$.confirm({
backgroundDismissAnimation: 'random',
});
});
})
</script>
实例7 模态框主题样式
<script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
$("#demo1").click(function(){
$.confirm({
icon: 'fa fa-spinner fa-spin',
title:'现代模态框',
theme: 'supervan',//这里可选的主题还有dark,light,supervan,material,bootstrap.
});
});
})
</script>
实例8 Ajax异步请求
<script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
$("#demo1").click(function(){
$.confirm({
content: function () {
var self = this;
return $.ajax({//Ajax异步请求
url: 'bower.json',//填写请求的地址
dataType: 'json',//参数的类型
method: 'get'//请求的方式
}).done(function (response) {//Ajax成功之后要做的事情
$.alert("请求成功")
}).fail(function(){//Ajax请求失败后要做的事情
$.alert("请求失败")
}).always(function(){
$.alert("成功与否都要执行的工作")
});
}
});
});
})
</script>
实例9 设定固定时常自动取消或确定
<script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
$("#demo1").click(function(){
$.confirm({
icon:'glyphicon glyphicon-map-marker',
title: '自动框？',
type:'green',
content: '在设定时间后如果没有任何操作就自动关闭模态框',
autoClose: '剩余|5000',//这里设置的是5秒后自动关闭，如果没进行任何操作就调用自动关闭
buttons: {
确定: {//这里确认
text: '删除确定',
action: function () {
$.alert('点击了确定!');
}
},
剩余: function () {
$.alert('自动取消了');
}
}
});
});
})
</script>
注意:以上实例的许多的配置项是可以互相使用比如可以将 type:‘green’, 这个配置项放在所有的实列中使用。同理，其他实例中出现的也可放到另一个实列中使用。可以根据业务需求自行选用。上面实列也只是一部份，想学习更多的可以自行查看官方文档
- 下载地址:https://pan.baidu.com/s/11M2l0_4LCYKK4t2KXwF8Fg 密码:n0yv
- API文档参考网址：http://craftpip.github.io/jquery-confirm/#api
