jQuery-confrim basic simple real column
One. The files that need to be imported. The files that need to be imported are similar to icons and layouts that need to be used in bootstrap in the modal box. . . It is only necessary to import the relevant files at these times, otherwise it is not necessary to import the relevant files
<!--外部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>
two. Warning box
<!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>
three. Confirmation box
<!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>
three. Dialog box
<!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>
four. Text box
<!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>
note:
1. In this column
alias of jdiafirm () of .dialog () and $ .alert () methods.
All three methods call the jconfirm basis function indirectly to change the options provided
Fives. The relevant parameters below respectively represent | name || default value || description |
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
The above document parameters are only part, if you need to use more or want to learn more, you can go to the relevant official website to view the API document URL, if you want to learn more, please refer to my ==> Next article
- API documentation reference URL http://craftpip.github.io/jquery-confirm/#api
- Download jQuery-confrim address http://craftpip.github.io/jquery-confirm/
- Download address: https://pan.baidu.com/s/11M2l0_4LCYKK4t2KXwF8Fg Password: n0yv
pay attention:
- When importing files, you need to put the jQuery file at the front of the import file or the effect will not appear
- When you need to use the files in bootstrap, you need to introduce bootstrap related files in the header
