README

Bootstrap (3 / 4 / 5) 模态框的基本处理程序

历史

• 第一个版本 2015-11-09 为 Bootstrap 3
• 第二个版本 2018-06-14 为 Bootstrap 4
• 第三个版本 2022-09-30 为 Bootstrap 5

JS需求

• Bootstrap (3 / 4 / 5) 与 jQuery

加载

require('./your/path/coercive/modal/dist/Modal.js');

new Modal();

基本警告框

new Modal({
    id: 'MyBasicAlertModal',
    title: 'Hello',
    content: 'This is an alert',
    topCancel: true,
    cancel: 'Close',
});

基本确认框

new Modal({
    id: 'MyBasicConfirmModal',
    title: 'Hello',
    content: 'This is a confirmation request',
    topCancel: true,
    cancel: 'Cancel',
    confirm: 'Confirm',
    onConfirm: (Popup) => {

        alert('confirmed !');
        Popup.close();

    },
});

基本表单模态框

new Modal({
    id: 'MyBasicConfirmModal',
    title: 'Hello',
    content: 'This is a form <form> ... </form>',
    topCancel: true,
    cancel: 'Cancel',
    confirm: 'Confirm',
    onConfirm: (Popup) => {

        //# Example of getting content Form
        let data = Popup.get().find('form').serializeArray();

        //# Example of getting form url
        let action = Popup.get().find('form').attr('action');

        //# Example of sending data
        $.ajax({
            method: 'POST',
            url: action,
            dataType: 'json',
            data: data
        }).done((json) => {

            //# Close current modal
            Popup.close();

            //# Need a confirm message ?
            new Modal({
                title: 'Hello',
                content: 'Your form has been sent',
                topCancel: true,
                cancel: 'Ok',
            });
            
        })

    },
});

选项

兼容性

一些功能在不同版本的Bootstrap中表现不同。默认加载版本 5。

new Modal({
    bootstrap: 3
});

自动打开

默认情况下模态框会打开，但您可以禁用它。

new Modal({
    open: false
});

可隐藏

默认情况下模态框是可隐藏的，但您可以禁用它。

new Modal({
    hideable: false
});

您还可以在脚本演变中使用行为方法。

let Popup = new Modal();

Popup.disable();

Popup.enable();

注入HTML

let Popup = new Modal();

Popup.get().body(html);

添加自定义类或对话框类

new Modal({
    class: 'my-custom-modal',
    dialogClass: 'modal-lg',
    confirmClass: 'example-custom-class',
    cancelClass: 'example-custom-class',
    topCancelClass: 'example-custom-class',
})

一些事件处理程序

new Modal({
    onHide: (Popup) => {
        // do something
    },
    onHidden: (Popup) => {
        // do something
    },
    onShow: (Popup) => {
        // do something
    },
    onHide: (Popup) => {
        // do something
    },
    onCancel: (Popup) => {
        // do something
    },
    onConfirm: (Popup) => {
        // do something
    }
})

锁定键盘操作

new Modal({
    backdrop: 'static',
    keyboard: false,
})