支持多种特效的jQuery弹出框插件jquery-confirm推荐

jquery-confirm使用教程

1.依赖库引入

<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请求提交数据
                }
            }
        }
    });
}