[ELMA4] Модальное окно (Popup)

Модальное окно состоит из:

• заголовка – строка текста;
• контента – html-разметка, имеет отступы 16px от краев окна;
• кнопок модального окна – располагаются в контейнере <div class="popup-buttons">...</div> в нижней части модального окна.

Все модальные окна являются адаптивными:

• всегда выровнены по центру окна браузера;
• изменяют свой размер в зависимости от окна браузера. Так, при открытии окна на смартфоне оно будет занимать практически весь экран, в то время как при открытии окна на мониторе компьютера оно займет лишь часть экрана.

Для определения размера модального окна существует ряд дискретных значений: "xxs", "xs", "s", "m", "l", "xl", "xxl", "full". Они определяются в классе UIWindowSize.
Размер модального окна, сопоставляемый с этими значениями, варьируется от самого маленького ("xxs") до самого большого ("full").

Методы для работы с модальным окном

C#

Html.AdaptivePopupWindow – создание модального окна на странице со следующими параметрами:

• id – идентификатор попапа на странице;
• header – текст заголовка попапа;
• content – содержимое попапа. Сюда можно передать html-разметку;
• widthMode – ширина попапа. Может иметь ряд дискретных значений из UIWindowSize;
• url – ссылка на содержимое для его динамической загрузки;
• showHeader – флаг, определяющий видимость заголовка окна.

Пример: на странице создаем модальное окно размера "m" с идентификатором AddQuestionPopup, заголовком "Задать вопрос" и html-содержимым <span>Текст в модальном окне</span>.

@Html.AdaptivePopupWindow("AddQuestionPopup",
    SR.T("Задать вопрос"),
    @<text>
        <span>Текст в модальном окне</span>
    </text>,
    UIWindowSize.M)

Html.OpenPopup – создает JavaScript функцию, которая открывает модальное окно. Параметры:

• id – идентификатор попапа на странице;
• onOpenScript – действие при открытии попапа;
• onCloseScript – действие при закрытии попапа.

Пример: с помощью Html.Button создает кнопку, при нажатии на которую будет открываться ранее созданое модальное окно с идентификатором AddQuestionPopup.

@Html.Button()
    .Text(SR.T("Задать вопрос"))
    .Click(Html.OpenPopup("AddQuestionPopup").ToString())

Html.RefreshPopup – cоздает JavaScript функцию, которая обновляет контент модального окна, используя заданный url, после чего открывает окно. Параметры:

• id – идентификатор попапа на странице;
• url – ссылка на контент;
• onOpenScript – действие при открытии попапа;
• onCloseScript – действие при закрытии попапа.

Пример: с помощью Html.Button создает кнопку, при нажатии на которую будет открываться модальное окно c контентом, полученным по ссылке, заданной в параметрах через Url.Action.

@Html.Button()
    .Text(SR.T("Задать вопрос"))
    .Click(Html.RefreshPopup("AddQuestionPopup", Url.Action("CreatePopup", "Question", new { area = CommonAreaRegistration.AREA_NAME })).ToString())

Html.ClosePopup – создает JavaScript функцию, которая закрывает модальное окно. Параметры:

• id – идентификатор попапа на странице;
• loaded – если указать fаlse, то при следующем открытии попапа через Html.OpenPopup его контент будет принудительно обновлен по заданному url. Если указать true, то попап загрузится с текущим контентом.

Пример: с помощью Html.Button создает кнопку, при нажатии на которую будет закрываться модальное окно.

@Html.Button()
    .Text(SR.T("Задать вопрос"))
    .Click(Html.ClosePopup("AddQuestionPopup").ToString())

JS

openWindow – открытие модального окна, эквивалент Html.OpenPopup.

refreshPopup – обновление модального окна, эквивалент Html.RefreshPopup.

closeWindow – закрытие модального окна, эквивалент Html.ClosePopup.

createAndLoadWindowWithSize – создание и открытие модального окна. Использует url для загрузки контента окна (по аналогии с refreshPopup); также позволяет задать ширину окна, используя константы UIWindowSize.

Основные изменения в модальных окнах в ELMA4 по сравнению с ELMA3

1. Для создания новых модальных окон нужно использовать метод Html.AdaptivePopupWindow вместо Html.PopupWindow.

// bad
@Html.PopupWindow("Id", "Name", @<text></text>)

// good
@Html.AdaptivePopupWindow("Id", "Name", @<text></text>, UIWindowSize.M)

2. Размер модального окна указывается с помощью констант из UIWindowSize вместо точного указания размера через пиксели.

// bad
@Html.PopupWindow("Id", "Name", @<text></text>, 900)

// good
@Html.AdaptivePopupWindow("Id", "Name", @<text></text>, UIWindowSize.M)

3. В блоке popup-buttons располагаются только кнопки.

// bad
<div class="popup-buttons">
    <div>
        Опции:
    </div>
    <input type="submit" value="Продолжить" />
    <input type="button" value="Отмена" />

</div>

// good
<div class="popup-buttons">
    <input type="submit" value="Продолжить" />
    <input type="button" value="Отмена" />
</div>

4. Поведение функции refreshPopupWithWidth теперь эквивалентно функции refreshPopup. При использовании функции refreshPopupWithWidth параметр width теперь никак не влияет на ширину окна.