logo

[ELMA4] Всплывающее окно (Popover)

Всплывающий контент, у которого есть следующие параметры:

  • id – идентификатор popover;
  • parent – идентификатор родителя или сам родитель;
  • options – необязательный параметр для кастомных данных;
  • widthMode – ширина поповера.

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

Подробнее об Options

Параметры попапа:

  • closeOnClick
  • closeOnEsc
  • useReferrer
  • onOpenScript
  • contentUrl
  • postData

Параметры для отображения поповера:

  • placement местоположение относительно родителя. По умолчанию bottom.

    Допустимые варианты: auto, top, right, bottom, left. Каждое место размещения может иметь вариант из этого списка: -start, -end.
    Пример: bottom-end

  • removeArrow убрать стрелку, установив значение true. По умолчанию removeArrow = null;
  • modifiers кастомное поведение поповера.

Подробнее о Modifiers

shift модификатор, используемый для смещения поппера на начало или конец своего родительского элемента.

preventOverflow модификатор, используемый для предотвращения позиционирования поппера за пределами границы документа или указанного boundariesElement.

flip модификатор, используемый для изменения положения поппера, когда он начинает перекрывать свой родительский элемент.

computeStyle вычисление стилей.

// Пример
openPopoverWindow('myPopoverId’, 'myParentId’, {
  placement : ‘bottom’,
  modifiers : {
  preventOverflow : {
    // поповер не будет выходить за пределы myContainer
    boundariesElement : document.getElementById('myContainer')
  },
  flip : {
    behavior: ['left', 'bottom', 'top']
  },
  // кастомное смещение относительно родителя
  offset : {
    offset : 10 // "10, -20"
  }}});
// или
openPopoverWindow('myPopoverId', 'myParentId');

Методы для работы с Popover

C#

Html.PopoverWindow создание поповера на странице.

Параметры:

  • id идентификатор поповера на странице;
  • content идентификатор родителя или сам родитель;
  • widthMode ширина поповера. Может иметь ряд дискретных значений из UIWindowSize.

Пример:

 @(Html.PopoverWindow("InpaymentStatusPopover",
    @<text>
        <div>SR.T("Текст в поповере")</div>
    </text>,
    UIWindowSize.Xxs))

Перегрузка метода Html.PopoverWindow.

Параметры:

  • popover модель типа Popover.

Пример: отобразить заговолок поповера. Для отображения заголовка необходимо указать ShowHeader и Header.

@(Html.PopoverWindow(new Popover {
  PopupId = "InpaymentStatusPopover",
  WidthMode = UIWindowSize.Xxs,
  ShowHeader = true,
  Content = @<text>
    <div>SR.T("Текст в поповере")</div>
  </text>,
  Header = @<text>SR.T("Заголовок окна")</text>
})

JS

openPopoverWindow открыть поповер на странице. Параметры:

  • id идентификатор поповера на странице;
  • content идентификатор родителя или сам родитель;
  • options необязательный параметр для кастомных данных.

Пример:

@Html.Button()
    .Text(SR.T("Задать вопрос"))
    .Click("openPopoverWindow('Popover', this)")

refreshPopoverWindow асинхронно обновить контент поповера и открыть. Параметры:

  • id идентификатор поповера на странице;
  • content идентификатор родителя или сам родитель;
  • options необязательный параметр для кастомных данных.

Пример:

@Html.Button()
    .Text(SR.T("Задать вопрос"))
    .Click("refreshPopoverWindow(id, parent, {postData: postData, contentUrl: contentUrl})")

closePopoverWindow закрыть поповер на странице. Параметр:

  • id идентификатор поповера на странице.

Пример:

closePopoverWindow('Popover')

Установить заголовок. Пример:

var popover = $("#popoverId").data("tWindow");
popover.title("Заголовок окна");