Modal – amCharts 4 Documentation

Type class

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

Click here 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";

/**
 * --------------------------------------------------------
 * Include via: <script src="core.js"></script>
 * Access items like: am4.Modal
 * --------------------------------------------------------
 */

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.
align #	Type `Align` Default `"center"` Inherited from `Popup` Horizontal positioning of the content window. Available options: "left", "center" (default), "right", and "none".
bottom #	Type `number` \| `Percent` Inherited 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 `string` Inherited 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 `boolean` Inherited 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 `object` Inherited 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 `string` Inherited from `Popup` Popup content. Popup content can be any valid HTML, including CSS.
defaultStyles #	Type `boolean` Default `true` Inherited 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 `boolean` Default `false` Inherited from `Popup` Can the popup be dragged with a pointer?
dynamicResize #	Type `boolean` Default `true` Inherited from `Popup` Resize popup as images are being loaded. @since 4.9.17
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`, `IPopupEvents` > > 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` \| `Percent` Inherited 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 `string` Inherited 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` \| `Percent` Inherited 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 `boolean` Default `false` Inherited 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 `string` Inherited from `Popup` Popup title. Popup title can be any valid HTML, including CSS.
top #	Type `number` \| `Percent` Inherited 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 `string` Inherited from `BaseObject` Returns object's internal unique ID.
verticalAlign #	Type `VerticalAlign` Default `"middle"` Inherited from `Popup` Vertical positioning of the content window. Available options: "top", "middle" (default), "bottom", and "none".
There are 23 inherited items currently hidden from this list.

Methods

clone( cloneId?: `string` ) #	Returns `this` Inherited 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 `void` Inherited from `Popup` Hides popup window.
constructor() #	Returns `Modal` Constructor
copyFrom( source: `this` ) #	Returns `void` Inherited from `Popup` Copies all properties and related data from different element.
dispatch( eventType: `Key`, data?: `any` ) #	Returns `void` Inherited 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 `void` Inherited from `BaseObjectEvents` Works like `dispatch`, except event is triggered immediately, without waiting for the next frame cycle.
dispose() #	Returns `void` Inherited 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 `boolean` Inherited from `BaseObject` Returns if this object has been already been disposed.
open() #	Returns `void` Inherited from `Popup` Shows popup window.
There are 9 inherited items currently hidden from this list.

clone(

cloneId?: string

)

Returns this

Inherited 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 void

Inherited from Popup

Hides popup window.

constructor()

Returns Modal

Constructor

copyFrom(

source: this

)

Returns void

Inherited from Popup

Copies all properties and related data from different element.

dispatch(

eventType: Key,
data?: any

)

Returns void

Inherited 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 void

Inherited from BaseObjectEvents

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

dispose()

Returns void

Inherited 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 boolean

Inherited from BaseObject

Returns if this object has been already been disposed.

open()

Returns void

Inherited from Popup

Shows popup window.

There are 9 inherited items currently hidden from this list.

Events

#closed	Param { type: `"closed"`, target: `this` } Inherited from `Popup` Invoked when Popup is closed.
#opened	Param { type: `"opened"`, target: `this` } Inherited from `Popup` Invoked when Popup is opened.
There are 2 inherited items currently hidden from this list.

#closed

Param { type: "closed",
target: this }

Inherited from Popup

Invoked when Popup is closed.

#opened

Param { type: "opened",
target: this }

Inherited from Popup

Invoked when Popup is opened.

There are 2 inherited items currently hidden from this list.

Adapters

#align	Param `Optional` < `Align` > Inherited from `IPopupAdapters` Applied to horizontal alignment of the popup.
#bottom	Param `number` \| `Percent` Inherited 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 `string` Inherited from `IPopupAdapters` Applied to the class prefixes.
#closable	Param `boolean` Inherited from `IPopupAdapters` Applied to `closable` property before it is retrieved.
#content	Param `string` Inherited from `IPopupAdapters` Applied to popup content before it is shown.
#defaultStyles	Param `boolean` Inherited from `IPopupAdapters` Applied to default `defaultStyles` property before it is retrieved.
#draggable	Param `boolean` Inherited from `IPopupAdapters` Applied to default `draggable` property before it is retrieved.
#dynamicResize	Param `boolean` Inherited from `IPopupAdapters` Applied to `dynamicResize` property before it is retrieved.
#left	Param `number` \| `Percent` Inherited from `IPopupAdapters` Applied to `left` position value.
#readerTitle	Param `string` Inherited from `IPopupAdapters` Applied to the screen reader title.
#right	Param `number` \| `Percent` Inherited from `IPopupAdapters` Applied to `right` position value.
#showCurtain	Param `boolean` Inherited from `IPopupAdapters` Applied to default `showCurtain` property before it is retrieved.
#title	Param `string` Inherited from `IPopupAdapters` Applied to popup title before it is shown.
#top	Param `number` \| `Percent` Inherited from `IPopupAdapters` Applied to `top` position value.
#verticalAlign	Param `Optional` < `VerticalAlign` > Inherited from `IPopupAdapters` Applied to vertical alignment of the popup.
There are 16 inherited items currently hidden from this list.