jQuery-confrim模态框

jQuery-confrim基本简单实列

一。需要引入的文件，下面需要引入的文件中是在模态框里需要使用到bootstrap中的类似于图标，布局。。。这些时才需要引入相关的文件，否则不需要引入相关的文件

<!--外部jQuery文件-->
		<script type="text/javascript" src="jquery-1.8.2.min.js" ></script>
		<!--demo文件中的-->
			<link rel="stylesheet" href="demo/libs/bundled.css" />
		<!--demo文件中的-->
		<!--dist文件夹中的-->
			<link rel="stylesheet" href="dist/jquery-confirm.min.css" />
			<script src="dist/jquery-confirm.min.js"></script>
		<!--dist文件夹中的-->
		<!--bootstrap文件引入 可选-->
		<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css">
	    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
		<!--bootstrap文件引入-->
		<script>

二。警示框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		//这里由于要预先加载，所以要放在$(function()
		$(function(){
			//演示实列1 警示框
			$("#demo1").click(function(){
				$.alert({
				    title: '警示框', //这里是警示框标题
				    content: '简单实例！', //这里是内容
				    type: 'purple',//模态框头部的颜色
				});
			});
		})
		</script>
	</head>
	<body>
		<button id="demo1">演示实例1</button>
	</body>
</html>

三。确认框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		//这里由于要预先加载，所以要放在$(function()
		$(function(){
			//演示实例2 确认框
			$("#demo2").click(function(){
				$.confirm({
				    title: '确认框',//这里是警示框标题
				    content: '简单实例',//这里是内容
   				    type: 'green',//模态框头部的颜色
				    buttons: {
				        confirm: function () {
				            $.alert('确认!');
				        },
				        cancel: function () {
				            $.alert('取消');
				        },
				        somethingElse: {
				            text: '还有别的',
				            btnClass: 'btn-orange',
				            keys: ['a', 'b'],
				            action: function(){
				                $.alert('别的什么！');
				            }
				        }
				    }
			    });
			});
		})
		</script>
	</head>
	<body>
		<button id="demo2">演示实例2</button>
	</body>
</html>

三。对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		//这里由于要预先加载，所以要放在$(function()
		$(function(){
			//演示实列三，对话框
			$("#demo3").click(function(){
				$.confirm({
						icon: 'glyphicon glyphicon-heart',
					    title: '对话框',
					    content: '' +
					    '<form action="" class="formName">' +
					    '<div class="form-group">' +
					    '<label>标题</label>' +
					    '<input type="text" placeholder="请输入" class="name form-control" required />' +
					    '</div>' +
					    '</form>',
					    buttons: {
					        formSubmit: {
					            text: '提交',
					            btnClass: 'btn-green',//这里可以更改按钮的颜色
					            action: function () {
					                var name = this.$content.find('.name').val();
					                if(!name){
					                    $.alert('输入项不能为空');
					                    return false;
					                }
					                $.alert('你输入的是' + name);
					            }
					        },
					        cancel: function () {
					            //close
					        },
					    },
					    onContentReady: function () {
					        // bind to events
					        var jc = this;
					        this.$content.find('form').on('submit', function (e) {
					            // if the user submits the form by pressing enter in the field.
					            e.preventDefault();
					            jc.$$formSubmit.trigger('click'); // reference the button and click it
					        });
					    }
					});
			});
			
		})
		</script>
	</head>
	<body>
		<button id="demo3">演示实例3</button>
	</body>
</html>

四。文本框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
		//这里由于要预先加载，所以要放在$(function()
		$(function(){
			//演示实列4文本框
			$("#demo4").click(function(){
				$.dialog({
				    title: '你好啊！',
				    content: '我是TWG!',
				    draggable:false, //限制模态框是否可以被移动，false不能移动，true可以移动
				    theme:'material',//改变模态框的主题样式可选的有'dark','light','material','bootstrap'
				});
			});
		})
		</script>
	</head>
	<body>
		<button id="demo4">演示实例4</button>
	</body>
</html>

注意:

1. 本实列中 $.confirm()，$ .dialog()和$.alert()方法的别名jconfirm()。
所有这三种方法间接调用jconfirm基函数来改变提供的选项

五。相关参数以下分别代表 |名称| |默认值| |描述|

title:'Hello'
//默认值是Hello，对话框的标题。还接受一个返回字符串的函数。

type:'default'
//将default改变成其他的颜色就可以更换模态框头部的颜色可用选项包括：'蓝色，绿色，红色，橙色，紫色和深色'

draggable:false
//设定模态框是否可以移动，true是可以移动，fasle不可以移动

icon:''
//图标类前置在标题之前。例如：'fa fa-icon'也可以使用bootstrap中的图标

theme:'light'
//可以更改主题样式默认微light还可以选用'light', 'dark', 'material' 'bootstrap'

animation:'zoom'
//模态框弹出时的方向动画，还可以选用right，left，bottom，top，rotate，none，opacity，scale，zoom，scaleY，scaleX，rotateY，rotateYR（reverse），rotateX，rotateXR（reverse）v1.1.2