API Reference
Namespaces
Classes
Events
Global
Externals

Namespace: cq-dialog

WebComponents. cq-dialog

Dialog web component <cq-dialog>.

Manages general dialog interaction such as display, hide, location, size, tap interaction, etc

Example

<cq-dialog cq-timezone-dialog>
	<cq-timezone-dialog>
		<h4 class="title">Choose Timezone</h4>
		<cq-close></cq-close>

		<p>
			To set your timezone use the location button below, or scroll through the following list...
		</p>
		<p class="currentUserTimeZone"></p>
		<div class="detect">
			<div class="ciq-btn" stxtap="Layout.removeTimezone()">
				Use My Current Location
			</div>
		</div>
		<div class="timezoneDialogWrapper" style="max-height:360px; overflow: auto;">
			<ul>
				<li class="timezoneTemplate" style="display:none;cursor:pointer;"></li>
			</ul>
		</div>
		<div class="instruct">(Scroll for more options)</div>
	</cq-timezone-dialog>
</cq-dialog>

Methods


refreshFocus(items)

Finds the first element in items that has a cq-focused attribute or a name attribute that matches the value of activeElementName. If found, that element is focused.

Parameters:
Name Type Description
items NodeList

A list of elements that are selectable via keyboard navigation.

Since:
  • 8.7.0


show( [params])

Show the dialog. Use X,Y screen location (pageX, pageY from an event) for where to display context menus. If the context menu cannot fit on the screen then it will be adjusted leftward and upward by enough pixels so that it shows.

Parameters:
Name Type Argument Description
params object <optional>

Parameters

Properties
Name Type Argument Default Description
bypassOverlay Boolean <optional>
false

If true will not display the scrim overlay

x Number <optional>

X location of top left corner. Use for context menus, otherwise dialog will be centered.

y Number <optional>

Y location of top left corner. Use for context menus, otherwise dialog will be centered.


Dialog#addActiveAttribute(attribute)

Creates a new attribute to be activated when the dialog is open. Use this to style the dialog. This is automatically set by any component that is derived from DialogContentTag

Parameters:
Name Type Description
attribute string

The attribute to add or remove

Since:
  • 4.1.0

Example
<style> cq-dialog[cq-study-context]{ padding:0; } </style>
<cq-dialog cq-study-context></cq-dialog>

Dialog#connectedCallback()

The attributes that are added to a cq-dialog when it is opened (and removed when closed). Contains "cq-active" by default.