Диалоговое окно

Controls/popup:Dialog — контрол, открывающий диалог, который позиционируется по центру окна браузера.

Размер окна

Если не задан размер окна, он определяется автоматически, по размеру контента.

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

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

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

<!-- Examples/Popup/templates/dialog -->
<Controls.popupTemplate:Dialog headingCaption="Создание категории">
   <ws:headerContentTemplate>
      <div class="dialog-top">
         <Controls.buttons:Button caption="Сохранить" on:click="_close()"/>
      </div>
   </ws:headerContentTemplate>
   <ws:bodyContentTemplate>
      <div class="dialog-content">
         <Controls.input:Text placeholder="Название категории" bind:value="text1" class="dialog-input" />
         <Controls.input:Text placeholder="Описание. Общее для тем и вопросов, объединенных категорией." bind:value="text2" class="dialog-input" />
      </div>
   </ws:bodyContentTemplate>
</Controls.popupTemplate:Dialog>

Пример конфигурации

// JavaScript
// Открываем с помощью Controls/popup:Dialog.
openDialog: function () {
   this._children.dialog.open();
},

Через template передаем шаблон всплывающего окна.

<Controls.popup:Dialog
    name="dialog"
    template="Examples/Popup/templates/dialog" />
 
<Controls.buttons:Button
    name="dialogButton"
    caption="Диалог"
    on:click="openDialog()"/>

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

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

this._dialog = new DialogOpener();

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

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

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

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

Как для шапки диалога задать серый фон?

Функционал находится в разработке.