光年模板说明文档
主题
字号
18px

jquery-confirm对话框

对话框插件使用的是jquery-confirm v3.3.4，它提供了很多功能，例如自动关闭，Ajax加载，主题，动画等。

github地址：http://craftpip.github.io/jquery-confirm/

文档地址：https://www.jquery-confirm.cn/

v3和v4模板中并没有什么不同，v4就改了下插件的文件夹名字。

你可以用它来做简单的提示框。 

$.alert({
    title: '警告框',
    content: '它一次可以顺利地做多次确认。<br>单击“确认”或“取消”以获取另一个模式',
    icon: 'mdi mdi-rocket',
    animation: 'scale',
    closeAnimation: 'scale',
    buttons: {
        okay: {
            text: '确认',
            btnClass: 'btn-blue'
        }
    }
});

也可以用它来跟用户做交互输入。 

$.confirm({
    title: '简单的形式',
    //content: 'url:form.html',  // 也可以采用url形式
    content: '<div class="form-group p-1 mb-0">' + 
             '  <label class="control-label">您的名字</label>' +
             '  <input autofocus="" type="text" id="input-name" placeholder="请输入您的名字" class="form-control">' +
             '</div>',
    buttons: {
        sayMyName: {
            text: '我的名字',
            btnClass: 'btn-orange',
            action: function() {
                var input = this.$content.find('input#input-name');
                var errorText = this.$content.find('.text-danger');
                if (!$.trim(input.val())) {
                    $.alert({
                        content: "name 字段不能为空。",
                        type: 'red'
                    });
                    return false;
                } else {
                    $.alert('您好！ ' + input.val() + ', 希望你今天过得愉快！');
                }
            }
        },
        '稍等': function() {}
    }
});

其他功能可以查看示例页面或者官方文档。

涉及的文件：