Popup Button

Open a details window on click.

How to use

Set the button icon/label and popup title/content.
Configure window size, position and close behavior.
Test opening, outside clicks and Escape closing in presentation mode.

Things to check

Closed popups may not appear in static exports; keep essential information on the slide.

Property reference

Select the module in the editor to change its settings. Technical identifiers below are kept unchanged for reference; some advanced fields are stored as structured data rather than separate controls.

Find a property

37 / 37

animationDelay

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number

animationLoop

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

animationSpeed

Controls movement speed, duration or delay. Units are shown in the editor control; test timing in presentation mode.

number

animationType

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'pulse' | 'bounce' | 'glow' | 'rotate'

buttonColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

buttonDisplayMode

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

'icon' | 'text' | 'both'

buttonSize

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

buttonText

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string

buttonTextColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

closeOnClickOutside

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

closeOnEscape

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

iconId

An icon identifier resolved by the catalogue; choose it through the icon picker.

string

iconName

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string

iconPack

Selects a symbol or list marker. Use a catalogue icon or a marker accepted by the editor.

string

popupAnimation

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

string

popupBackgroundColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

popupBackgroundImage

An image, media or link source. Use the media picker or an accessible URL and verify it loads in the presentation.

string

popupBorderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

popupBorderRadius

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

popupBorderStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

string

popupBorderWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

popupContent

Popup content or button target; enter the text/address in the relevant editor and check presentation mode.

string

popupHeaderColor

Sets the color of the associated element or surface. Use the color picker and check text contrast.

string

popupHeaderHeight

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

popupHeight

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

popupOffsetX

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

popupOffsetY

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

popupOpacity

Sets the associated effect intensity or visibility. Stay within the editor allowed range.

number

popupPosition

Sets the associated element alignment, placement or direction; preview it within the content area.

string | { x: number; y: number }

popupRotation

Rotation or angle setting. Check block bounds and overlaps after rotating.

number

popupShadow

Enables or configures the associated visual emphasis; check legibility on the background.

string

popupTextPosition

Sets the associated element alignment, placement or direction; preview it within the content area.

{ x: number; y: number }

popupTextStyle

Selects appearance or movement style for the associated element. Valid choices are provided in the module editor.

{
    fontSize: number;
    fontFamily: string;
    color: string;
    fontWeight: 'normal' | 'bold' | 'light';
    textAlign?: string;
  }

popupTitle

Visible copy or a label for this element. Write concise, descriptive content and check it fits the layout.

string

popupWidth

Changes the associated element dimension or spacing. Follow the editor unit and check overflow or cropping.

number

showCloseButton

Enables or disables the associated behavior or visible element. Check the result in presentation preview.

boolean

zIndex

Element stacking order; higher values may appear in front of other elements.

number