jQuery模态弹窗插件(jquery-confirm)

前言

今天为大家分享一款开源的非常轻量且精美的jQuery模态弹窗插件：jquery-confirm，它包含Bootstrap,Material等多种主题供选择。

如果你的前端项目中还在使用jQuery，那么jquery-confirm是你模态弹窗的完美选择。

下面我们就来零距离感受一下jquery-confirm的魅力吧。

jquery-confirm官网地址：https://craftpip.github.io/jquery-confirm/
jquery-confirm源码托管地址：https://github.com/craftpip/jquery-confirm

功能特性

jquery-confirm包含了前端开发中界面的多种交互功能，如：

• Alerts(提示信息)

• Confirmation(弹窗确认)

• Prompt(弹窗输入)

• Dialog(对话框)

• Asynchronous content(异步加载内容)

• Auto-close(窗口自动关闭)

• Keystrokes(快捷键)

• Animations(动画)

• Draggable(拖拽窗口)

• Theme(切换主题)

安装

jquery-confirm组件包含两个资源文件，分别为：样式文件jquery-confirm.min.css和脚本文件jquery-confirm.min.js。

你可以通过CDN直接引用，如下：

登录后复制

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

或者通过Bower安装：

登录后复制

$ bower install craftpip/jquery-confirm

或者通过npm安装：

登录后复制

$ npm install jquery-confirm

注：jquery-confirm依赖于jQuery，如果你还需要响应式布局，则还依赖Bootstrap。

主题

jquery-confirm提供了多种精美的主题，如：

Modern风格：

Material风格：

Bootstrap风格：

Supervan风格：

开始使用

简单的提示信息($.alert)

使用$.alert()函数即可弹出简单的提示信息，如下：

登录后复制

$.alert({

    title: 'Alert!',

    content: 'Simple alert!',

});

确认弹窗($.confirm)

使用$.confirm()函数可以打开一个确认消息的弹窗，如下：

登录后复制

$.confirm({

    title: 'Confirm!',

    content: 'Simple confirm!',

    buttons: {

        confirm: function () {

            $.alert('Confirmed!');

        },

        cancel: function () {

            $.alert('Canceled!');

        },

        somethingElse: {

            text: 'Something else',

            btnClass: 'btn-blue',

            keys: ['enter', 'shift'],

            action: function(){

                $.alert('Something else?');

            }

        }

    }

});

$.confirm()函数还可以自定义content的内容，让其变成一个弹出的输入框，如下：

登录后复制

$.confirm({

    title: 'Prompt!',

    content: '' +

    '<form action="" class="formName">' +

    '<div class="form-group">' +

    '<label>Enter something here</label>' +

    '<input type="text" placeholder="Your name" class="name form-control" required />' +

    '</div>' +

    '</form>',

    buttons: {

        formSubmit: {

            text: 'Submit',

            btnClass: 'btn-blue',

            action: function () {

                var name = this.$content.find('.name').val();

                if(!name){

                    $.alert('provide a valid name');

                    return false;

                }

                $.alert('Your name is ' + 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

        });

    }

});

对话框($.dialog)

调用$.dialog()函数可以弹出一个对话框，如下：

登录后复制

$.dialog({

    title: 'Text content!',

    content: 'Simple modal!',

});

以上三种弹窗都提供更简单的参数调用，如：

登录后复制

$.alert('Content here', 'Title here');

$.confirm('A message', 'Title is optional');

$.dialog('Just to let you know');

弹窗按钮

在$.confirm()函数中，你还可以自定义多个按钮，包括按钮的文本，样式，回调等等参数，如下：

登录后复制

$.confirm({

    buttons: {

        hello: function(helloButton){

            // shorthand method to define a button

            // the button key will be used as button name

        },

        hey: function(heyButton){

            // access the button using jquery

            this.$$hello.trigger('click'); // click the 'hello' button

            this.$$hey.prop('disabled', true); // disable the current button using jquery method

            // jconfirm button methods, all methods listed here

            this.buttons.hello.setText('Helloooo'); // setText for 'hello' button

            this.buttons.hey.disable(); // disable with button function provided by jconfirm

            this.buttons.hey.enable(); // enable with button function provided by jconfirm

            // the button's instance is passed as the first argument, for quick access

            heyButton === this.buttons.hey

        },

        heyThere: {

            text: 'Hey there!', // text for button

            btnClass: 'btn-blue', // class for the button

            keys: ['enter', 'a'], // keyboard event for button

            isHidden: false, // initially not hidden

            isDisabled: false, // initially not disabled

            action: function(heyThereButton){

                // longhand method to define a button

                // provides more features

            }

        },

    }

});

比如，自定义按钮的文本：

登录后复制

$.confirm({

    buttons: {

        hey: function () {

            // here the button key 'hey' will be used as the text.

            $.alert('You clicked on "hey".');

        },

        heyThere: {

            text: 'hey there!', // With spaces and symbols

            action: function () {

                $.alert('You clicked on "heyThere"');

            }

        }

    }

});

自定义按钮的样式：

登录后复制

$.confirm({

    buttons: {

        info: {

            btnClass: 'btn-blue',

            action: function(){}

        },

        danger: {

            btnClass: 'btn-red any-other-class', // multiple classes.

            //...

        },

        warning: {

            btnClass: 'btn-warning',

            //...

        },

    }

});

绑定按钮的快捷键：

登录后复制

$.confirm({

    content: 'Time to use your keyboard, press shift, alert, A or B',

    buttons: {

        specialKey: {

            text: 'On behalf of shift',

            keys: ['shift', 'alt'],

            action: function(){

                $.alert('Shift or Alt was pressed');

            }

        },

        alphabet: {

            text: 'A, B',

            keys: ['a', 'b'],

            action: function(){

                $.alert('A or B was pressed');

            }

        }

    }

});

自定义

自定义对话框类型

在jquery-confirm组件中，你可以通过设置type参数来自定义对话框的类型，如：

登录后复制

$.confirm({

    title: 'Encountered an error!',

    content: 'Something went downhill, this may be serious',

    type: 'red',

    typeAnimated: true,

    buttons: {

        tryAgain: {

            text: 'Try again',

            btnClass: 'btn-red',

            action: function(){

            }

        },

        close: function () {

        }

    }

});

自定义对话框的图标

通过指定icon，可以自定义对话框的图标，如：

登录后复制

$.confirm({

    icon: 'glyphicon glyphicon-heart',

    title: 'glyphicon'

});

$.confirm({

    icon: 'fa fa-warning',

    title: 'font-awesome'

});

$.confirm({

    icon: 'fa fa-spinner fa-spin',

    title: 'Working!',

    content: 'Sit back, we are processing your request!'

});

自定义对话框的宽度

如果使用了Bootstrap响应式布局，你还可以应用Bootstrap的column样式来自定义对话框的宽度，如：

登录后复制

$.confirm({

    columnClass: 'small'

});

$.confirm({

    columnClass: 'col-md-4 col-md-offset-4',

});

$.confirm({

    columnClass: 'col-md-12'

});

$.confirm({

    columnClass: 'col-md-4 col-md-offset-8 col-xs-4 col-xs-offset-8',

    containerFluid: true, // this will add 'container-fluid' instead of 'container'

});

如果没有引用Bootstrap样式，则必需设置jconfirm.defaults.useBootstrap = false，然后再自定义对话框宽度，如：

登录后复制

$.confirm({

    boxWidth: '30%',

    useBootstrap: false,

});

$.confirm({

    boxWidth: '500px',

    useBootstrap: false,

});

可拖拽窗口

jquery-confirm实现可拖拽窗口非常简单，只需要设置draggable参数的值为true即可，如：

登录后复制

$.confirm({

    title: 'Hello there',

    content: 'click and hold on the title to drag',

    draggable: true,

});

默认情况下，拖拽不受浏览器窗口的限制，也就是说你可以把窗口拖拽到浏览器可视区域外，如：

登录后复制

$.confirm({

    title: 'Hello there',

    content: 'Drag this modal out of the window',

    draggable: true,

    dragWindowBorder: false,

});

如果想要窗口在浏览器可视区域内拖拽，则设置dragWindowGap参数，如下：

登录后复制

$.confirm({

    title: 'Hello there',

    content: 'try to drag this modal out of the window',

    draggable: true,

    dragWindowGap: 0, // number of px of distance

});

Ajax加载

jquery-confirm还支持Ajax加载，你只需要设置content参数以url:为前缀即可，如：

登录后复制

$.confirm({

    title: 'Title',

    content: 'url:text.txt',

    onContentReady: function () {

        var self = this;

        this.setContentPrepend('<div>Prepended text</div>');

        setTimeout(function () {

            self.setContentAppend('<div>Appended text after 2 seconds</div>');

        }, 2000);

    },

    columnClass: 'medium',

});

Esc键关闭

jquery-confirm支持快捷键Esc键来关闭对话框，如：

登录后复制

$.confirm({

    escapeKey: true,

    backgroundDismiss: false,

});

$.confirm({

    escapeKey: 'buttonName',

    buttons: {

        buttonName: function(){

            $.alert('Button name was called');

        },

        close: function(){

        }

    }

});

内置的回调函数

jquery-confirm内置了许多回调函数，如：

登录后复制

$.confirm({

    title: false,

    content: 'url:callback.html',

    onContentReady: function () {

        // when content is fetched & rendered in DOM

        alert('onContentReady');

        var self = this;

        this.buttons.ok.disable();

        this.$content.find('.btn').click(function(){

            self.$content.find('input').val('Chuck norris');

            self.buttons.ok.enable();

        });

    },

    contentLoaded: function(data, status, xhr){

        // when content is fetched

        alert('contentLoaded: ' + status);

    },

    onOpenBefore: function () {

        // before the modal is displayed.

        alert('onOpenBefore');

    },

    onOpen: function () {

        // after the modal is displayed.

        alert('onOpen');

    },

    onClose: function () {

        // before the modal is hidden.

        alert('onClose');

    },

    onDestroy: function () {

        // when the modal is removed from DOM

        alert('onDestroy');

    },

    onAction: function (btnName) {

        // when a button is clicked, with the button name

        alert('onAction: ' + btnName);

    },

    buttons: {

        ok: function(){

        }

    }

});

全局参数配置

在jquery-confirm组件被正确加载之后，你可以自定义配置它的全局参数，jquery-confirm提供的全局参数如下：

登录后复制

jconfirm.defaults = {

    title: 'Hello',

    titleClass: '',

    type: 'default',

    typeAnimated: true,

    draggable: true,

    dragWindowGap: 15,

    dragWindowBorder: true,

    animateFromElement: true,

    smoothContent: true,

    content: 'Are you sure to continue?',

    buttons: {},

    defaultButtons: {

        ok: {

            action: function () {

            }

        },

        close: {

            action: function () {

            }

        },

    },

    contentLoaded: function(data, status, xhr){

    },

    icon: '',

    lazyOpen: false,

    bgOpacity: null,

    theme: 'light',

    animation: 'scale',

    closeAnimation: 'scale',

    animationSpeed: 400,

    animationBounce: 1,

    rtl: false,

    container: 'body',

    containerFluid: false,

    backgroundDismiss: false,

    backgroundDismissAnimation: 'shake',

    autoClose: false,

    closeIcon: null,

    closeIconClass: false,

    watchInterval: 100,

    columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',

    boxWidth: '50%',

    scrollToPreviousElement: true,

    scrollToPreviousElementAnimate: true,

    useBootstrap: true,

    offsetTop: 40,

    offsetBottom: 40,

    bootstrapClasses: {

        container: 'container',

        containerFluid: 'container-fluid',

        row: 'row',

    },

    onContentReady: function () {},

    onOpenBefore: function () {},

    onOpen: function () {},

    onClose: function () {},

    onDestroy: function () {},

    onAction: function () {}

};