Прилипающий блок

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

Документация API Спецификация Axure

Размер окна

Размер окна определяется автоматически и выбирается по размеру контента.

Стандартный шаблон

Controls/popupTemplate:Sticky

Схема раскладки шаблона:

Пример шаблона:

<!-- WML -->
<Controls.popupTemplate:Sticky headingCaption="Заголовок">
   <ws:bodyContentTemplate>
         <div class="controlsDemo-PopupTemplate__list-item"> Элемент меню 1 </div>
         <div class="controlsDemo-PopupTemplate__list-item"> Элемент меню 2 </div>
         <div class="controlsDemo-PopupTemplate__list-item"> Длинный элемент меню 3 </div>
         <div class="controlsDemo-PopupTemplate__list-item"> Элемент меню 4 </div>
   </ws:bodyContentTemplate>
   <ws:footerContentTemplate>
         <div class="controlsDemo_ColumnsView_itemTemplate-description controlsDemo-PopupTemplate__footer">
            <div class="controlsDemo-PopupTemplate__list-item"> Элемент меню 5 </div>
         </div>
   </ws:footerContentTemplate>
</Controls.popupTemplate:Sticky>

Открытие окна

Целевой элемент (это может быть DOM-элемент или контрол) передаем в метод open() с помощью свойства target:

// TypeScript
// Открываем с помощью Controls/popup:Sticky.
 
protected openSticky(): void {
   this._children.sticky.open({
       
      // Так в метод open() передаем элемент, относительно которого откроется окно.
      target: this._children.MyStickyTarget  
   });
},

Конфигурацию позиционирования окна относительно элемента можно передать в метод open() либо указать в верстке в конфигурации всплывающего окна. В опции template передаем шаблон всплывающего окна.

<!-- WML -->
<div name="MyStickyTarget"></div>
<Controls.buttons:Button
    name="dialogButton"
    caption="Открыть Sticky"
    on:click="openSticky()"/>
<Controls.popup:Sticky
    name="sticky"
    template="Examples/Popup/templates/sticky">
    <ws:templateOptions myText="Hello, Sticky!" />
    <ws:direction
        vertical="top"
        horizontal="left"/>
    <ws:targetPoint vertical="bottom" horizontal="left"/>
</Controls.popup:Sticky>

Открытие всплывающего окна без добавления в шаблон открывающего контрола

Класс Controls/popup:StickyOpener предоставляет методы open() и close, с помощью которых можно открыть окно уведомлений без использования открывающего контрола.

// TypeScript
import {StickyOpener} from 'Controls/popup';

this._sticky = new StickyOpener();

openDialog() {
    this._sticky.open({
        template: 'myTemplate',
        opener: this
    });
}

_beforeUnmount() {
    this._sticky.close();
}

Для передачи данных из всплывающего элемента в родительский контрол обратитесь к инструкции.

Передача данных из всплывающего окна в родительский контрол

Читать подробнее.