<link href="css/jquery-confirm/3.2.3/jquery-confirm.min.css" rel="stylesheet">
<link href="css/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<script src="js/jquery/1.12.4/jquery.min.js "></script>
<script src="js/jquery-confirm/3.2.3/jquery-confirm.min.js "></script>
<script src="js/jquery.form/4.2.1/jquery.form.js"></script>
示例一:消息提示框
function confirmAlert(msg) {
$.alert({
title: '系统提示',
content: msg,
icon: 'fa fa-comment',
type: 'green',
buttons: {
"是的": function() { }
示例二:消息提示框+倒计时操作
function confirmAlertWithRedirect(msg, url) {
$.alert({
title: '系统提示',
content: msg,
icon: 'fa fa-comment',
type: 'green',
autoClose: '好的|3000',
escapeKey: '好的',
buttons: {
"好的": {
btnClass: 'btn-blue',
action: function() {
window.location.href = url;
示例三:弹出框接收输入参数,Ajax提交
function doSubmit(id) {
$.confirm({
icon: 'fa fa-plus',
type: 'blue',
title: '提交数据',
content: '<div class="form-group"><input type="text" placeholder="你的名字" class="form-control name" /></div>' +
'<div class="form-group"><input type="text" placeholder="你的年龄" class="form-control age"/></div>',
buttons: {
'取消': function() {},
'提交': {
btnClass: 'btn-blue',
action: function() {
var age = this.$content.find('.age').val();
var name = this.$content.find('.name').val();
confirmAlert("即将提交的数据:id:" + id + ",名称:" + name + ",年龄:" + age);
//TODO 在这里写AJAX请求提交数据
the end