Namespace: cq-dialog

WebComponents. cq-dialog

Dialog web component <cq-dialog>.

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


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

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


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.

Name Type Argument Description
params object <optional>


Name Type Argument Default Description
bypassOverlay Boolean <optional>

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.

<static> 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

Name Type Description
attribute string

The attribute to add or remove

  • 4.1.0

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

<static> Dialog#connectedCallback()

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