Static Properties

Coral.mixin.overlay.focusOnShow {String}

Focus behavior options.

Properties:

Name	Type	Value	Description
ON	String	on	When the overlay is opened, it will be focused.
OFF	String	off	The overlay will not focus itself when opened.

Coral.mixin.overlay.returnFocus {String}

Return focus options.

Properties:

Name	Type	Value	Description
ON	String	on	When the overlay is closed, the element that was focused before the it was shown will be focused again.
OFF	String	off	Nothing will be focused when the overlay is closed.

Coral.mixin.overlay.trapFocus {String}

Focus trap options.

Properties:

Name	Type	Value	Description
ON	String	on	Focus is trapped such that the use cannot focus outside of the overlay.
OFF	String	off	The user can focus outside the overlay as normal.

Instance Properties

instance.focusOnShow {Coral.mixin.overlay.focusOnShow | HTMLElement | String}

Whether to focus the overlay, when opened or not. By default the overlay itself will get the focus. It also accepts an instance of HTMLElement or a selector like ':first-child' or 'button:last-of-type'. If the selector returns multiple elements, it will focus the first element inside the overlay that matches the selector.

Default Value:

• Coral.mixin.overlay.focusOnShow.ON

HTML Attribute:

• focusonshow

instance.open {Boolean}

Reflected

Whether this overlay is open or not.

Default Value:

• false

HTML Attribute:

• open

instance.returnFocus {Coral.mixin.overlay.returnFocus}

Whether to return focus to the previously focused element when closed.

Default Value:

• Coral.mixin.overlay.returnFocus.OFF

HTML Attribute:

• returnfocus

instance.trapFocus {Coral.mixin.overlay.trapFocus}

Whether to trap tabs and keep them within the overlay.

Default Value:

• Coral.mixin.overlay.trapFocus.OFF

HTML Attribute:

• trapfocus

Methods

instance.hide

Close the overlay.

Returns:

this, chainable {Coral.Component}

instance.returnFocusTo

Set the element that focus should be returned to when the overlay is hidden.

Parameters:

Name	Type	Description
element	HTMLElement	The element to return focus to. This must be a DOM element, not a jQuery object or selector.

Returns:

this, chainable {Coral.Component}

instance.show

Open the overlay and set the z-index accordingly.

Returns:

this, chainable {Coral.Component}

Events

coral-overlay:beforeclose

Triggerred before the component is closed with hide() or instance.open = false.

Callback Parameters:

Name	Type	Description
event	Object	Event object. Name Type Description event.preventDefault function Call to stop the overlay from closing.

coral-overlay:beforeopen

Triggerred before the component is opened with show() or instance.open = true.

Callback Parameters:

Name	Type	Description
event	Object	Event object. Name Type Description event.preventDefault function Call to stop the overlay from opening.

coral-overlay:close

Triggerred after the component is closed with hide() or instance.open = false

Callback Parameters:

Name	Type	Description
event	Object	Event object.

coral-overlay:open

Triggerred after the overlay is opened with show() or instance.open = true

Callback Parameters:

Name	Type	Description
event	Object	Event object.