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>

Members


Dialog#activeAttributes :Object

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

Type:
  • Object

Methods


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>