Download

You can download a minimized version of the library or get the full source code at github.com.

Download source

Install with npm

$ npm install coreui-modal

Требования

Для корректной работы на странице необходимо наличие: Bootstrap 5, jquery

Examples

Simple modal



    <button class="btn btn-sm btn-primary" id="btn-simple">Simple</button>

    <script>
        $('#btn-simple').click(function () {
            CoreUI.modal.show("Title modal", "Body content", {
                id: "simple",
                footer: "Footer content",
                onShow: function (event) {
                    console.log('Show');
                },
                onShown: function (event) {
                    console.log('Shown');
                },
                onHide: function (event) {
                    console.log('Hide');
                },
                onHidden: function (event) {
                    console.log('Hidden');
                }
            });
        });
    </script>


Sizes


    <button class="btn btn-sm btn-primary" id="btn-modal-fullscreen">Fullscreen</button>
    <button class="btn btn-sm btn-primary" id="btn-modal-xl">Extra large</button>
    <button class="btn btn-sm btn-primary" id="btn-modal-lg">Large</button>
    <button class="btn btn-sm btn-primary" id="btn-modal-sm">Small</button>

    <script>
        $('#btn-modal-fullscreen').click(function () {
            CoreUI.modal.show("Title modal", "Body content", {
                footer: "Footer content",
                size: "fullscreen"
            });
        });

        $('#btn-modal-xl').click(function () {
            CoreUI.modal.show("Title modal", "Body content", {
                footer: "Footer content",
                size: "xl"
            });
        });

        $('#btn-modal-lg').click(function () {
            CoreUI.modal.show("Title modal", "Body content", {
                footer: "Footer content",
                size: "lg"
            });
        });

        $('#btn-modal-sm').click(function () {
            CoreUI.modal.show("Title modal", "Body content", {
                footer: "Footer content",
                size: "sm"
            });
        });
    </script>


Ajax


    <button class="btn btn-sm btn-primary" id="btn-modal-load">Load</button>

    <script>
        $('#btn-modal-load').click(function () {
            CoreUI.modal.showLoad("Title modal", "data/sample.html", {
                footer: "Footer content",
                size: "lg"
            });
        });
    </script>


Options

Name type default description
id string crc32b Идентификатор модала. Этот id будет указан вместо уникального значения
title string Заголовок модала
body string Содержимое модала
footer string Нижнее содержимое модала
size string lg Размер модального окна. Возможные варианты: fullscreen, xl, lg, sm
lang string en Язык фраз
backdrop string false Отмена возможности закрытия модала при нажатии на фон
onShow function Событие выполняем самым первым в начале открытия модала
onShown function Событие выполняемое после открытия модала
onHide function Событие выполняемое в начале закрытия модала
onHidden function Событие выполняемое после закрытия модала

Methods

Method Return Description 
let modal = CoreUI.modal.create( options )
 CoreUI.modal.instance Метод для создания экземпляра модала 
let modal = CoreUI.modal.get( modalId )
 CoreUI.modal.instance Получение ранее созданного экземпляра модала 
CoreUI.modal.setSettings( settings )
 Установка некоторых настроек по умолчанию для создаваемых модалов 
CoreUI.modal.getSetting( name )
 mixed Получение значения установленной настройки по умолчанию для создаваемых модалов 
CoreUI.modal.hideLast( callback )
 Скрытие последнего открытого модала 
CoreUI.modal.hideAll( callback )
 Скрытие всех открытых модалов 
modal.show( title, body, options )
 HTMLElement Метод для создания и показа модала. Результатом выполнения будет созданный элемент, содержащий в себе модал 
modal.showLoad( title, url, options )
 HTMLElement Метод показывает модал и загружает в него ответ от сервера по указанному адресу. Результатом выполнения будет созданный элемент, содержащий в себе модал 
modal.getId()
 string Получение id модала 
modal.getOptions()
 object Получение настроек модала 
modal.setContent( content )
 Замена содержимого тела в модале 
modal.setTitle( content )
 Замена заголовка 
modal.setFooter( content )
 Замена подвала 
modal.loadContent( url )
 Загрузка содержимого модала 
modal.hide()
 Скрытие модала 
modal.getLang()
 Получение настроек языка 
modal.on( name, callback )
 Регистрация функции вызываемой при наступлении указанного события 
modal.destruct()
 Уничтожение модала

Events

Event Type Description
modal_show Показ модала на странице. Происходит один раз в начале отображения
modal_shown Показ модала на странице. Происходит один раз при отображении
modal_hide Скрытие модала на странице. Происходит один раз в начале скрытия
modal_hidden Скрытие модала на странице. Происходит один раз при скрытии
content_change Выполняется каждый раз при изменении содержимого модала.
В качестве параметров передаются modal.on('content_change', function ( modal )
title_change Выполняется каждый раз при изменении заголовка модала.
В качестве параметров передаются modal.on('title_change', function ( modal )
footer_change Выполняется каждый раз при изменении подвала модала.
В качестве параметров передаются modal.on('footer_change', function ( modal )
content_load_before Выполняется перед началом запроса для получения данных для модала.
В качестве параметров передаются modal.on('content_load_before', function (modal, xhr)
content_load_success Выполняется после успешного запроса для получения данных для модала.
В качестве параметров передаются modal.on('content_load_success', function (modal, result)
content_load_error Выполняется после не успешного запроса для получения данных для модала.
В качестве параметров передаются modal.on('content_load_error', function (modal, xhr, textStatus, errorThrown)
content_load_complete Выполняется после запроса для получения данных для модала.
В качестве параметров передаются modal.on('content_load_complete', function (modal, xhr, textStatus)