Skip to content
amCharts 4

Modal

Type class

Shows an HTML modal which covers window or a chart area.

More info: Popups and Modals For examples and docs on Popups and Modals.

Sources

Modal can be used (imported) via one of the following packages.

/**
 * Import from: "core.ts"
 * Use like: am4core.Modal
 */
import * as am4core from "@amcharts/amcharts4/core";

Inheritance

Modal extends Popup.

Modal is not extended by any other symbol.

Properties

adapter

Type Adapter <Modal, IModalAdapters>Default new Adapter<Modal, IModalAdapters>(this)

Adapter.

23 inherited items
align

Type AlignDefault "center"Inherited from Popup

Horizontal positioning of the content window.

Available options: "left", "center" (default), "right", and "none".

bottom

Type number | PercentInherited from Popup

"bottom" coordinate of a non-aligned (verticalAlign = "none") popup.

Can be either absolute pixel value, or relative (Percent).

Setting this property will automatically set verticalAlign to "none".

NOTE: The position is relative to the chart container.

classPrefix

Type stringInherited from Popup

A prefix that is applied to class names of various popup elements.

clonedFrom

Type $type.Optional <this>Inherited from BaseObject

Reference to the original object this object was cloned from. We need to keep this so we can disassociate it from source object when this object is disposed.

closable

Type booleanInherited from Popup

Is popup closable?

If it is, it can be closed in a number of ways, e.g. by hitting ESC key, clicking curtain, or clicking the close button.

If it is not closable, the only way to close it is via close() call.

config

Type objectInherited from BaseObject

Use this property to set JSON-based config. When set, triggers processing routine, which will go through all properties, and try to apply values, create instances, etc.

Use this with caution, as it is a time-consuming process. It's used for initialchart setup only, not routine operations.

container

Type $type.Optional <HTMLElement | Document>Inherited from Popup

A reference to an HTML element to be used for container. If not set, popup will cover the whole window.

content

Type stringInherited from Popup

Popup content.

Popup content can be any valid HTML, including CSS.

defaultStyles

Type booleanDefault trueInherited from Popup

Should popup use default CSS?

If default CSS is disabled, an external CSS should handle the look of the popup, since it will look quite out of place otherwise.

draggable

Type booleanDefault falseInherited from Popup

Can the popup be dragged with a pointer?

dynamicResize

Type booleanDefault trueInherited from PopupSince 4.9.17

Resize popup as images are being loaded.

elements

Type { close: HTMLElement, content: HTMLElement, curtain: HTMLElement, title: HTMLElement, wrapper: HTMLElement }Inherited from Popup

Returns an object with references to various elements of the Popup.

  • wrapper

  • title

  • content

  • close

  • curtain

events

Type EventDispatcher <AMEvent <this, IBaseObjectEvents>>Inherited from BaseObjectEvents

An EventDispatcher instance

id

Type $type.Optional <string>Inherited from BaseObject

Sets the user-defined id of the element.

left

Type number | PercentInherited from Popup

"left" coordinate of a non-aligned (align = "none") popup.

Can be either absolute pixel value, or relative (Percent).

Setting this property will automatically set align to "none".

NOTE: The position is relative to the chart container.

readerTitle

Type stringInherited from Popup

A title for screen readers. It is very highly recommended to set that title so that people using screen reader tools can get an immediate summary of the information in the popup.

right

Type number | PercentInherited from Popup

"right" coordinate of a non-aligned (align = "none") popup.

Can be either absolute pixel value, or relative (Percent).

Setting this property will automatically set align to "none".

NOTE: The position is relative to the chart container.

showCurtain

Type booleanDefault falseInherited from Popup

Should popup use dim out all content behind it?

sprite

Type $type.Optional <Sprite>Inherited from Popup

A parent element this Popup belongs to.

title

Type stringInherited from Popup

Popup title.

Popup title can be any valid HTML, including CSS.

top

Type number | PercentInherited from Popup

"top" coordinate of a non-aligned (verticalAlign = "none") popup.

Can be either absolute pixel value, or relative (Percent).

Setting this property will automatically set verticalAlign to "none".

NOTE: The position is relative to the chart container.

uid

Type stringInherited from BaseObject

Returns object's internal unique ID.

verticalAlign

Type VerticalAlignDefault "middle"Inherited from Popup

Vertical positioning of the content window.

Available options: "top", "middle" (default), "bottom", and "none".

Methods

constructor()

Returns Modal

Constructor

9 inherited items
clone(cloneId?: string)

Returns thisInherited from BaseObject

Makes a copy of this object and returns the clone. Try to avoid cloning complex objects like chart, create new instances if you need them.

close()

Returns voidInherited from Popup

Hides popup window.

copyFrom(source: this)

Returns voidInherited from Popup

Copies all properties and related data from different element.

dispatch(eventType: Key,
data?: any)

Returns voidInherited from BaseObjectEvents

Dispatches an event using own event dispatcher. Will automatically populate event data object with event type and target (this element).

It also checks if there are any handlers registered for this sepecific event.

dispatchImmediately(eventType: Key,
data?: any)

Returns voidInherited from BaseObjectEvents

Works like dispatch, except event is triggered immediately, without waiting for the next frame cycle.

dispose()

Returns voidInherited from Popup

Destroy (dispose) popup.

getCurrentThemes()

Returns ITheme[]Inherited from BaseObject

Returns a list of themes that should be applied to this element. It could either be a list of themes set explicitly on this element, or system-wide.

isDisposed()

Returns booleanInherited from BaseObject

Returns if this object has been already been disposed.

open()

Returns voidInherited from Popup

Shows popup window.

Events

2 inherited items
closed

Param { type: "closed", target: Modal }Inherited from Popup

Invoked when Popup is closed.

opened

Param { type: "opened", target: Modal }Inherited from Popup

Invoked when Popup is opened.

Adapters

16 inherited items
align

Param Optional <Align>Inherited from IPopupAdapters

Applied to horizontal alignment of the popup.

bottom

Param number | PercentInherited from IPopupAdapters

Applied to bottom position value.

classNames

Param { closeClass: string, contentClass: string, curtainClass: string, headerClass: string, insideClass: string, titleClass: string, wrapperClass: string }Inherited from IPopupAdapters

Applied to class names list that are added as class for various popup elements.

classPrefix

Param stringInherited from IPopupAdapters

Applied to the class prefixes.

closable

Param booleanInherited from IPopupAdapters

Applied to closable property before it is retrieved.

content

Param stringInherited from IPopupAdapters

Applied to popup content before it is shown.

defaultStyles

Param booleanInherited from IPopupAdapters

Applied to default defaultStyles property before it is retrieved.

draggable

Param booleanInherited from IPopupAdapters

Applied to default draggable property before it is retrieved.

dynamicResize

Param booleanInherited from IPopupAdapters

Applied to dynamicResize property before it is retrieved.

left

Param number | PercentInherited from IPopupAdapters

Applied to left position value.

readerTitle

Param stringInherited from IPopupAdapters

Applied to the screen reader title.

right

Param number | PercentInherited from IPopupAdapters

Applied to right position value.

showCurtain

Param booleanInherited from IPopupAdapters

Applied to default showCurtain property before it is retrieved.

title

Param stringInherited from IPopupAdapters

Applied to popup title before it is shown.

top

Param number | PercentInherited from IPopupAdapters

Applied to top position value.

verticalAlign

Param Optional <VerticalAlign>Inherited from IPopupAdapters

Applied to vertical alignment of the popup.