jQuery-confrim模态框实例

心已赠人 2022-04-05 09:48 115阅读 0赞

### 前面讲解了一些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’, 这个配置项放在所有的实列中使用。同理，其他实例中出现的也可放到另一个实列中使用。可以根据业务需求自行选用。上面实列也只是一部份，想学习更多的可以自行查看官方文档 ###

1.  下载地址:[https://pan.baidu.com/s/11M2l0\_4LCYKK4t2KXwF8Fg][https_pan.baidu.com_s_11M2l0_4LCYKK4t2KXwF8Fg] 密码:n0yv
2.  API文档参考网址：[http://craftpip.github.io/jquery-confirm/\#api][http_craftpip.github.io_jquery-confirm_api]

[https_pan.baidu.com_s_11M2l0_4LCYKK4t2KXwF8Fg]: https://pan.baidu.com/s/11M2l0_4LCYKK4t2KXwF8Fg
[http_craftpip.github.io_jquery-confirm_api]: http://craftpip.github.io/jquery-confirm/#api

发表评论取消回复

表情：

评论列表（有 0 条评论，115人围观）

还没有评论，来说两句吧...

相关阅读

相关 BootStrap模态框

模态框（Modal）是覆盖在父窗体上的子窗体,是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动子窗体可提供信息、交互等通过dat

客官°小女子只卖身不卖艺/ 2023年07月19日 12:28/ 0 赞/ 63 阅读

相关 HTML 模态框

HTML 模态框复制粘贴就能用 <!DOCTYPE html> <html> <head> <meta charset="ut

妖狐艹你老母/ 2022年10月29日 10:26/ 0 赞/ 255 阅读

相关 bootstrap 模态框

我们需要引入bootstrap.min.js 先创建模态框的触发装置： <button class="btn btn-primary btn-lg" data-to

你的名字/ 2022年08月01日 02:50/ 0 赞/ 396 阅读

相关模态框

点击按钮弹出模态框的实现： html： <!DOCTYPE html> <html> <head> <meta charset="u

淡淡的烟草味﹌/ 2022年05月14日 14:24/ 0 赞/ 320 阅读

相关 jQuery-confrim模态框实例

前面讲解了一些jQuery-confrim中的四个最基本的列子和一些简单的参数使用。这里将根据一些官方给出的列子进行实验和说明，拷贝就可以使用,但是前提是要像我第一篇模态框文

心已赠人/ 2022年04月05日 09:48/ 0 赞/ 116 阅读

相关 bootstrap--模态框

复制即可运行. 小模态框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

╰半橙微兮°/ 2022年02月21日 07:47/ 0 赞/ 476 阅读

相关 bootstrap模态框-单击模态框之外不关闭

在模态框标签添加如下标签：data-backdrop="static" data-keyboard="false"  <div cl

系统管理员/ 2022年02月03日 12:17/ 0 赞/ 461 阅读

相关模态框

模态框模态框，又是一种全新的异空间页面，本篇介绍的模态框开启后，除了窗体、框体之外的内容都被遮住了，点击不了，只能关闭后，其他之前的才能操作。 ![在这里插

爱被打了一巴掌/ 2022年01月26日 11:27/ 0 赞/ 439 阅读

相关 Revit 模态框

非模态窗口有一个好处，就是可以一直停留在程序之前，然后持续完成操作。但是在Revit二次开发中，非模态窗口也有几个注意事项。 1、需要在文档关闭的时候，把非模态窗口也关闭掉，

约定不等于承诺〃/ 2022年01月06日 20:29/ 0 赞/ 384 阅读

相关 bootstrap模态框实例

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。实例：在这里我...

系统管理员/ 2021年05月03日 15:05/ 0 赞/ 742 阅读