The previous section explained some of the four most basic examples in jQuery-confrim and some simple parameters. Here we will conduct experiments and instructions according to some official examples, and the copy can be used, but the premise is to be like css and js file files mentioned in my first modal box article. Example 1: Modal box with click button
<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>
Example 2 Confirmation box with variable colors for buttons and headers
$.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("点击了取消")
}
}
});
Example 3 Modal box with icons
<script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
//演示实列1 警示框
$("#demo1").click(function(){
$.confirm({
icon: 'fa fa-spinner fa-spin',
title: '图标框',
content: '改变icon中的图标就可改变相应的标题图标可以使用bootstrap中的图标也可使用自带的fa图标'
});
});
})
</script>
Example 4 The width of the modal box and whether it can be dragged
<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>
Example 5 Delay and animation of modal box <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>
Example 6 Custom animation, if you want to use custom animation, you must also set the related CSS style <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>
Example 7 modal box theme style <script>
//这里由于要预先加载，所以要放在$(function()
$(function(){
$("#demo1").click(function(){
$.confirm({
icon: 'fa fa-spinner fa-spin',
title:'现代模态框',
theme: 'supervan',//这里可选的主题还有dark,light,supervan,material,bootstrap.
});
});
})
</script>
Example 8 Ajax asynchronous request <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>
Example 9 Setting a fixed time often automatically cancel or confirm <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>
Note: Many of the configuration items in the above examples can be used with each other. For example, type: 'green', this configuration item can be used in all real columns. Similarly, what appears in other examples can also be used in another real column. You can choose according to business needs. The above list is only a part, if you want to learn more, you can check the official document by yourself
Download address: https://pan.baidu.com/s/11M2l0_4LCYKK4t2KXwF8Fg Password: n0yv API documentation reference URL: http://craftpip.github.io/jquery-confirm/#api
