jquery 打开模态框 jquery 模态框实现

转载

墨染青丝 2023-09-27 10:32:16

文章标签 jquery 打开模态框 jQuery-confrim模态框实列模态框加载 bootstrap 文章分类 jQuery 前端开发

前面讲解了一些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>