[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 теперь никак не влияет на ширину окна.