Popup

23 Sep 20256 minutes to read

Represents the Popup Component

<div id="popup" style="position:absolute;height:100px;width:100px;">
<div style="margin:35px 25px;">Popup Content</div></div>

<script>
  var popupObj = new Popup();
  popupObj.appendTo("#popup");
</script>

Properties

actionOnScroll ActionOnScrollType

specifies the action that should happen when scroll the target-parent container.
This property should define either reposition or hide.
when set reposition to this property, the popup position will refresh when scroll any parent container.
when set hide to this property, the popup will be closed when scroll any parent container.

Defaults to ‘reposition’

collision CollisionAxis

Specifies the collision handler settings of the component.

Defaults to { X: ‘none’,Y: ‘none’ }

content string|HTMLElement

Specifies the content of the popup element, it can be string or HTMLElement.

Defaults to null

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

specifies the rtl direction state of the popup element.

Defaults to false

height string|number

Specifies the height of the popup element.

Defaults to ‘auto’

hideAnimation AnimationModel

specifies the animation that should happen when popup closes.

Defaults to ‘null’

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

offsetX number

specifies the popup element offset-x value, respective to the relative element.

Defaults to 0

offsetY number

specifies the popup element offset-y value, respective to the relative element.

Defaults to 0

position PositionDataModel

Specifies the popup element position, respective to the relative element.

Defaults to {X:”left”, Y:”top”}

relateTo HTMLElement|string

Specifies the relative container element of the popup element.Based on the relative element, popup element will be positioned.

Defaults to ‘body’

showAnimation AnimationModel

specifies the animation that should happen when popup open.

Defaults to ‘null’

targetType TargetType

Specifies the relative element type of the component.

Defaults to ‘container’

viewPortElement HTMLElement

Specifies the collision detectable container element of the component.

Defaults to null

width string|number

Specifies the height of the popup element.

Defaults to ‘auto’

zIndex number

specifies the z-index value of the popup element.

Defaults to 1000

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event
handler	Function	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	string | HTMLElement	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

To destroy the control.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

getScrollableParent

Gets scrollable parent elements for the given element.

Parameter	Type	Description
element	HTMLElement	Specify the element to get the scrollable parents of it.

Returns HTMLElement[]

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hide

Hides the popup element from screen.

Parameter	Type	Description
animationOptions (optional)	AnimationModel	To give the animation options.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

refreshPosition

Based on the relative element and offset values, Popup element position will refreshed.

Parameter	Type	Description
target (optional)	HTMLElement	The target element.
collision (optional)	boolean	Specifies whether to check for collision.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	string	A String that specifies the name of the event to remove
handler	Function	Specifies the function to remove

Returns void

resolveCollision

To resolve if any collision occurs.

Returns void

show

Shows the popup element from screen.

Parameter	Type	Description
animationOptions (optional)	AnimationModel	specifies the model
relativeElement (optional)	HTMLElement	To calculate the zIndex value dynamically.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	Function[]	?

Returns void

Events

close EmitType<Object>

Trigger the event once closed the popup.

open EmitType<Object>

Triggers the event once opened the popup.

targetExitViewport EmitType<Object>

Triggers the event when target element hide from view port on scroll.