Modal

Twitter bootstrap Documentation

Examples

Twitter bootstrap Documentation

Modal components

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->modal([
    'title' => 'Modal title',
    'Modal body text goes here.',
    'footer' => [
        'button' => [
            [
                'options' => [
                    'label' => 'Close',
                    'variant' => 'secondary',
                ],
                'attributes' => [
                    'data-bs-dismiss' => 'modal',
                ],
            ],
            [
                'options' => [
                    'label' => 'Save changes',
                    'variant' => 'primary',
                ],
            ],
        ],
    ],
]);

Live demo

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Launch demo modal',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModal',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal title',
            'attributes' => ['id' => 'exampleModalLabel'],
        ],
        'Woohoo, you\'re reading this text in a modal!',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Save changes',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'id' => 'exampleModal',
    ]
);

Static backdrop

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Launch static backdrop modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#staticBackdrop',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal title',
            'attributes' => ['id' => 'staticBackdropLabel'],
        ],
        'I will not close if you click outside me. Don\'t even try to press escape key.',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Understood',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'backdrop' => true,
        'id' => 'staticBackdrop',
    ]
);

Scrolling long content

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Launch demo modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModalLong',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal title',
            'attributes' => ['id' => 'exampleModalLongTitle'],
        ],
        'This is some placeholder content to show the scrolling behavior for modals. ' .
        'Instead of repeating the text the modal, ' .
        'we use an inline style set a minimum height, ' .
        'thereby extending the length of the overall modal ' .
        'and demonstrating the overflow scrolling. ' .
        'When content becomes longer than the height of the viewport, ' .
        'scrolling will move the modal as needed.',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Save changes',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'id' => 'exampleModalLong',
        'body_attributes' => ['style' => 'min-height: 1500px'],
    ]
);

echo PHP_EOL . '<br/>';

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Launch demo modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModalScrollable',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal title',
            'attributes' => ['id' => 'exampleModalScrollableTitle'],
        ],
        'This is some placeholder content to show the scrolling behavior for modals. ' .
        'We use repeated line breaks to demonstrate how content can exceed minimum inner height, ' .
        'thereby showing inner scrolling. ' .
        'When content becomes longer than the predefined max-height of modal, ' .
        'content will be cropped and scrollable within the modal.',
        '<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>' .
        '<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>',
        'This content should appear at the bottom after you scroll.',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Save changes',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'scrollable' => true,
        'id' => 'exampleModalScrollable',
    ]
);

Vertically centered

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Vertically centered modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModalCenter',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal title',
            'attributes' => ['id' => 'exampleModalCenterTitle'],
        ],
        'This is a vertically centered modal.',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Save changes',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'id' => 'exampleModalCenter',
        'centered' => true,
    ]
);

echo PHP_EOL . '<br/>';

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Vertically centered scrollable modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModalCenteredScrollable',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal title',
            'attributes' => ['id' => 'exampleModalCenteredScrollableTitle'],
        ],
        'This is some placeholder content to show a vertically centered modal. ' .
        'We\'ve added some extra copy here to show how vertically centering the modal works when ' .
        'combined with scrollable modals. ' .
        'We also use some repeated line breaks to quickly extend the height of the content, ' .
        'thereby triggering the scrolling. ' .
        'When content becomes longer than the predefined max-height of modal, ' .
        'content will be cropped and scrollable within the modal.</p>',
        '<br><br><br><br><br><br><br><br><br><br>',
        'Just like that.',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Save changes',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'id' => 'exampleModalCenteredScrollable',
        'centered' => true,
        'scrollable' => true,
    ]
);

Tooltips and popovers

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Launch demo modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModalPopovers',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal title',
            'attributes' => ['id' => 'exampleModalPopoversLabel'],
        ],
        [
            'type' => 'subtitle',
            'content' => 'Popover in a modal',
        ],
        'This <a class="btn btn-secondary popover-test" data-bs-container="#exampleModalPopovers" ' .
        'data-bs-content="Popover body content is set in this attribute." ' .
        'data-bs-original-title="Popover title" ' .
        'href="#" role="button" title="">button</a> triggers a popover on click.',
        '---',
        [
            'type' => 'subtitle',
            'content' => 'Tooltips in a modal',
        ],
        '<a class="tooltip-test" data-bs-container="#exampleModalPopovers" data-bs-original-title="Tooltip" ' .
        'href="#" title="">This link</a> and <a class="tooltip-test" ' .
        'data-bs-container="#exampleModalPopovers" ' .
        'data-bs-original-title="Tooltip" href="#" title="">that link</a> have tooltips on hover.',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Save changes',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'id' => 'exampleModalPopovers',
    ]
);

Using the grid

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Launch demo modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#gridSystemModal',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Grids in modals',
            'attributes' => ['id' => 'gridModalLabel'],
        ],
        'grid' => [
            'rows' => [
                [
                    [
                        [
                            '.col-md-4',
                            ['column' => 'md-4'],
                        ],
                        [
                            '.col-md-4 .ms-auto',
                            ['column' => 'md-4', 'class' => 'ms-auto'],
                        ],
                    ],
                ],
                [
                    [
                        [
                            '.col-md-3 .ms-auto',
                            ['column' => 'md-3', 'class' => 'ms-auto'],
                        ],
                        [
                            '.col-md-2 .ms-auto',
                            ['column' => 'md-2', 'class' => 'ms-auto'],
                        ],
                    ],
                ],
                [
                    [
                        [
                            '.col-md-6 .ms-auto',
                            ['column' => 'md-6', 'class' => 'ms-auto'],
                        ],
                    ],
                ],
                [
                    [
                        [
                            'Level 1: .col-sm-9',
                            [
                                'column' => 'sm-9',
                                'grid' => [
                                    'rows' => [
                                        [
                                            [
                                                [
                                                    'Level 2: .col-8 .col-sm-6',
                                                    ['column' => [8, 'sm-6']],
                                                ],
                                                [
                                                    'Level 2: .col-4 .col-sm-6',
                                                    ['column' => [4, 'sm-6']],
                                                ],
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
            'attributes' => [
                'container' => 'fluid',
                'class' => 'bd-example-row',
            ],
        ],
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Save changes',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'id' => 'gridSystemModal',
    ]
);

Varying modal content

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Open modal for @mdo',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModal',
        'data-bs-whatever' => '@mdo',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Open modal for @fat',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModal',
        'data-bs-whatever' => '@fat',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Open modal for @getbootstrap',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModal',
        'data-bs-whatever' => '@getbootstrap',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'New message to @mdo',
            'attributes' => ['id' => 'exampleModalLabel'],
        ],
        'form' => [
            'elements' => [
                [
                    'spec' => [
                        'name' => 'recipient',
                        'options' => [
                            'label' => 'Recipient:',
                        ],
                        'attributes' => [
                            'id' => 'recipient-name',
                        ],
                    ],
                ],
                [
                    'spec' => [
                        'name' => 'message',
                        'options' => [
                            'label' => 'Message:',
                        ],
                        'attributes' => [
                            'type' => 'textarea',
                            'id' => 'message-text',
                        ],
                    ],
                ],
            ],
        ],
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Send message',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'id' => 'exampleModal',
    ]
);

$this->inlineScript()->captureStart();

// TODO: docusaurus mdx-loader does not support this
// echo <<<JS
//     var exampleModal = document.getElementById('exampleModal')
//     exampleModal.addEventListener('show.bs.modal', function (event) {
//         // Button that triggered the modal
//         var button = event.relatedTarget
//         // Extract info from data-bs-* attributes
//         var recipient = button.getAttribute('data-bs-whatever')
//         // If necessary, you could initiate an AJAX request here
//         // and then do the updating in a callback.
//         //
//         // Update the modal's content.
//         var modalTitle = exampleModal.querySelector('.modal-title')
//         var modalBodyInput = exampleModal.querySelector('.modal-body input')

//         modalTitle.textContent = 'New message to ' + recipient
//         modalBodyInput.value = recipient
//     })
// JS;

$this->inlineScript()->captureEnd();
echo $this->inlineScript();

Toggle between modals

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Open first modal',
        'tag' => 'a',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'href' => '#exampleModalToggle',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal 1',
            'attributes' => ['id' => 'exampleModalToggleLabel'],
        ],
        'Show a second modal and hide this one with the button below.',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Open second modal',
                        'variant' => 'primary',
                    ],
                    'attributes' => [
                        'data-bs-toggle' => 'modal',
                        'data-bs-target' => '#exampleModalToggle2',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'centered' => true,
        'id' => 'exampleModalToggle',
    ]
);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal 2',
            'attributes' => ['id' => 'exampleModalToggleLabel2'],
        ],
        'Hide this modal and show the first with the button below.',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Back to first',
                        'variant' => 'primary',
                    ],
                    'attributes' => [
                        'data-bs-toggle' => 'modal',
                        'data-bs-target' => '#exampleModalToggle',
                    ],
                ],
            ],
        ],
    ],
    [
        'fade' => true,
        'hidden' => true,
        'centered' => true,
        'id' => 'exampleModalToggle2',
    ]
);

Remove animation

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Launch demo modal',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModal',
    ],
]);

echo $this->modal(
    [
        'title' => [
            'content' => 'Modal title',
            'attributes' => ['id' => 'exampleModalLabel'],
        ],
        'Woohoo, you\'re reading this text in a modal!',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
                [
                    'options' => [
                        'label' => 'Save changes',
                        'variant' => 'primary',
                    ],
                ],
            ],
        ],
    ],
    [
        'hidden' => true,
        'id' => 'exampleModal',
    ]
);

Optional sizes

Twitter bootstrap Documentation

Result

Source

<?php


echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Extra large modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModalXl',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Large modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModalLg',
    ],
]);

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Small modal',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModalSm',
    ],
]);

echo $this->modal([
    'title' => [
        'content' => 'Extra large modal',
        'attributes' => ['id' => 'exampleModalXlLabel', 'class' => 'h4'],
    ],
    '...',
], [
    'hidden' => true,
    'fade' => true,
    'size' => 'xl',
    'id' => 'exampleModalXl',
]);

echo $this->modal([
    'title' => [
        'content' => 'Large modal',
        'attributes' => ['id' => 'exampleModalLgLabel', 'class' => 'h4'],
    ],
    '...',
], [
    'hidden' => true,
    'fade' => true,
    'size' => 'lg',
    'id' => 'exampleModalLg',
]);

echo $this->modal([
    'title' => [
        'content' => 'Small modal',
        'attributes' => ['id' => 'exampleModalSmLabel', 'class' => 'h4'],
    ],
    '...',
], [
    'hidden' => true,
    'fade' => true,
    'size' => 'sm',
    'id' => 'exampleModalSm',
]);

Fullscreen Modal

Twitter bootstrap Documentation

Result

Source

<?php


$fullscreenSizes = ['sm', 'md', 'lg', 'xl', 'xxl'];

echo $this->formButton()->renderSpec([
    'options' => [
        'label' => 'Full screen',
        'variant' => 'primary',
    ],
    'attributes' => [
        'data-bs-toggle' => 'modal',
        'data-bs-target' => '#exampleModalFullscreen',
    ],
]);

foreach ($fullscreenSizes as $size) {
    echo $this->formButton()->renderSpec([
        'options' => [
            'label' => 'Full screen below ' . $size,
            'variant' => 'primary',
        ],
        'attributes' => [
            'data-bs-toggle' => 'modal',
            'data-bs-target' => '#exampleModalFullscreen' . ucfirst($size),
        ],
    ]);
}

echo $this->modal([
    'title' => [
        'content' => 'Full screen modal',
        'attributes' => ['id' => 'exampleModalFullscreenLabel', 'class' => 'h4'],
    ],
    '...',
    'footer' => [
        'button' => [
            [
                'options' => [
                    'label' => 'Close',
                    'variant' => 'secondary',
                ],
                'attributes' => [
                    'data-bs-dismiss' => 'modal',
                ],
            ],
        ],
    ],
], [
    'hidden' => true,
    'fade' => true,
    'fullscreen' => true,
    'id' => 'exampleModalFullscreen',
]);

foreach ($fullscreenSizes as $size) {
    echo $this->modal([
        'title' => [
            'content' => 'Full screen below ' . $size,
            'attributes' => ['id' => 'exampleModalFullscreen' . ucfirst($size) . 'Label', 'class' => 'h4'],
        ],
        '...',
        'footer' => [
            'button' => [
                [
                    'options' => [
                        'label' => 'Close',
                        'variant' => 'secondary',
                    ],
                    'attributes' => [
                        'data-bs-dismiss' => 'modal',
                    ],
                ],
            ],
        ],
    ], [
        'hidden' => true,
        'fade' => true,
        'fullscreen' => $size,
        'id' => 'exampleModalFullscreen' . ucfirst($size),
    ]);
}