---
title: "Пример рендера модального окна в Joomla 5 с Bootsrap  5 Optional sizes и Fullscreen mode. - WebTolk"
description: "В модальные окна удобно прятать части форм админки Joomla для того, чтобы не было длинных портянок для заполнения. Одним из способов рендера модального окна в Joomla где-нибудь в макете компонента являются следующий. параметр modalCss для bootstrap.modal в Joomla 5."
url: "https://web-tolk.ru/blog/primer-rendera-modalnogo-okna-v-joomla-5-s-bootsrap-5-optional-sizes-i-fullscreen-mode"
date: "2024-09-26T07:12:36+00:00"
language: "ru-RU"
---

# Пример рендера модального окна в Joomla 5 с Bootsrap 5 Optional sizes и Fullscreen mode.

 Автор: Сергей Толкачев Создано: 26 сентября 2024 Обновлено: 10 января 2026 Просмотров: 1110

В модальные окна удобно прятать части форм админки Joomla для того, чтобы не было длинных портянок для заполнения. Одним из способов рендера модального окна где-нибудь в макете компонента являются следующий.

```
<?php
use Joomla\CMS\Layout\LayoutHelper;
use Joomla\CMS\Factory;

// в макетах компонента вместо этого
// можно использовать $this->getDocument()
Factory::getApplication()->getDocument()
    ->getWebAssetManager()->useScript('bootstrap.modal');

    $ModalData = [
        'selector' => 'AnySelectorModal', //modal id
        'params'   => [
            'title'      => 'Modal header text',
            'footer'     => 'Modal footer text', // or HTML
            'height'     => '400px', // height of the <iframe> containing the remote resource
            'width'      => '800px', // width of the <iframe> containing the remote resource
            'bodyHeight' => 70, // Optional height of the modal body in viewport units (vh)
            'modalWidth' => 80, // Optional width of the modal in viewport units (vh)
        ],
        'body' => 'Modal body content'
    ];

    echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $ModalData);
```

В Joomla 5 появилась возможность указывать параметр `modalCss` в массиве `params`. И теперь модальное окно в Joomla может менять свои размеры в зависимости от размера экрана (классы `.modal-sm`, `.modal-lg` и т.д), а также может стать полноэкранным (классы `.modal-fullscreen`, `.modal-fullscreen-xl-down` и т.д.).

Выглядит это так (в целом тот же код, но приведу его полностью):

```
<?php
use Joomla\CMS\Layout\LayoutHelper;

$this->getDocument()
    ->getWebAssetManager()->useScript('bootstrap.modal');

$ModalData = [
     'selector' => 'addNewColor',
          'params'   => [
               'title'      => 'Modal header text',
               'footer'     => 'Modal footer text',
               'height'     => '400px', // height of the <iframe> containing the remote resource
               'width'      => '800px', // width of the <iframe> containing the remote resource
               'bodyHeight' => 70, // Optional height of the modal body in viewport units (vh)
               'modalWidth' => 80, // Optional width of the modal in viewport units (vh)
               'modalCss' => 'modal-fullscreen',
          ],
          'body' => 'Modal body content'
];

echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $ModalData);
```

Добавлю ссылку на [документацию по модалкам в Bootstrap 5.3](https://getbootstrap.com/docs/5.3/components/modal/#fullscreen-modal).

- [Пост в Telegram-канале @WebTolkRu](https://t.me/webtolkru/331)

## Об авторе

![Толкачев Сергей Юрьевич](https://web-tolk.ru/images/uslugi/sergey-tolkachyov-apr-2023.webp)

### Толкачев Сергей Юрьевич

Joomla-разработчик. [Контрибьютер ядра Joomla](https://github.com/joomla/joomla-cms/pulls?q=is%3Apr+author%3Asergeytolkachyov+). Один из ведущих Telegram-канала русскоязычного Joomla-сообщества [JoomlaFeed](https://t.me/joomlafeed), один из модераторов [чата русскоязычного Joomla-сообщества](https://t.me/joomlaru). Мои расширения в официальном маркетплейсе расширений Joomla - [Joomla Extensions Directory](https://extensions.joomla.org/profile/profile/details/528051/). Имею публикации в [официальном журнале международного Joomla-сообщества - Joomla Community Magazine](https://magazine.joomla.org/authors/sergeytolkachyov) и на [официальном сайте русскоязычного Joomla-сообщества](https://joomlaportal.ru/users/sergey-tolkachyov).

Муж. Отец 3 детей.

Россия, Саратов.

## JSON-LD Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "item": {
                "@id": "https://web-tolk.ru/",
                "name": "Главная"
            }
        },
        {
            "@type": "ListItem",
            "position": 2,
            "item": {
                "@id": "https://web-tolk.ru/blog",
                "name": "Блог"
            }
        },
        {
            "@type": "ListItem",
            "position": 3,
            "item": {
                "name": "Пример рендера модального окна в Joomla 5 с Bootsrap  5 Optional sizes и Fullscreen mode."
            }
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@graph": [
        {
            "@type": "Organization",
            "@id": "https://web-tolk.ru/#/schema/Organization/base",
            "name": "WebTolk",
            "url": "https://web-tolk.ru/",
            "logo": {
                "@type": "ImageObject",
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo",
                "url": "images/webtolk-1080p.jpg",
                "contentUrl": "images/webtolk-1080p.jpg",
                "width": 1920,
                "height": 1080
            },
            "image": {
                "@id": "https://web-tolk.ru/#/schema/ImageObject/logo"
            },
            "sameAs": [
                "https://github.com/WebTolk",
                "https://github.com/sergeytolkachyov",
                "https://vk.com/web_tolk",
                "https://vk.com/webtolkru",
                "https://tenchat.ru/sergeytolkachyov",
                "https://t.me/sergeytolkachyov",
                "https://t.me/webtolkru"
            ]
        },
        {
            "@type": "WebSite",
            "@id": "https://web-tolk.ru/#/schema/WebSite/base",
            "url": "https://web-tolk.ru/",
            "name": "WebTolk",
            "publisher": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            }
        },
        {
            "@type": "WebPage",
            "@id": "https://web-tolk.ru/#/schema/WebPage/base",
            "url": "https://web-tolk.ru/blog/primer-rendera-modalnogo-okna-v-joomla-5-s-bootsrap-5-optional-sizes-i-fullscreen-mode",
            "name": "Пример рендера модального окна в Joomla 5 с Bootsrap  5 Optional sizes и Fullscreen mode. - WebTolk",
            "description": "В модальные окна удобно прятать части форм админки Joomla для того, чтобы не было длинных портянок для заполнения. Одним из способов рендера модального окна в Joomla где-нибудь в макете компонента являются следующий. параметр modalCss для bootstrap.modal в Joomla 5.",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebSite/base"
            },
            "about": {
                "@id": "https://web-tolk.ru/#/schema/Organization/base"
            },
            "inLanguage": "ru-RU",
            "breadcrumb": {
                "@id": "https://web-tolk.ru/#/schema/BreadcrumbList/17"
            }
        },
        {
            "@type": "Article",
            "@id": "https://web-tolk.ru/#/schema/com_content/article/108",
            "isPartOf": {
                "@id": "https://web-tolk.ru/#/schema/WebPage/base"
            }
        }
    ]
}
```