<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>
                                

    <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>
                                

    <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>