Usage

For full documentation, including architectural concepts and a getting started guide, see the Developing Modals in Invision confluence page.

Note: Dialogs & Modals have undergone evolutionary changes since the beginning of Invision. If modeling new instances off existing ones, be sure to make all necessary changes to adhere to the latest documented patterns.

• dialog-title: The title for the dialog header.
• dialog-size: Sets the size of the dialog. Options include "tiny", "small", "medium", "large", "huge", and "custom".
• dialog-type: Sets the type of the dialog. Options include "content", and "form". If no type is defined, a warning is logged to the console.
• dialog-class: (string) Include any classes in the main dialog element which uses class "t-dialog", and "c-dialog".
• icon-glyph: (string) What icon to display in the header (if any).
• is-flush: (boolean) Whether the content of the dialog should be flush.
• hide-close: (boolean) Whether to hide the close "x" button.
• fixed-height: Set a fixed height for the dialog. Specify a css value (px, rem, em, etc.).
• fixed-width: Set a fixed width for the dialog. Specify a css value (px, rem, em, etc.).
• on-close: (function) Logic that needs to be called when the dialog closes.

Basic Dialog

Default Dialog

HTML

<div class="t-popup">
    <inv-dialog dialog-title="'Basic Content Dialog'" dialog-size="small" dialog-type="content">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Confirm</button>
        </dialog-footer>
    </inv-dialog>
</div>

Form Dialog

Form Dialog with validation, error messages display and auto scroll on error.

HTML

<p>This example demostrates a modal with form that has validation and auto scrolls to error message.</p>
<p>Use "form" element instead of "ng-form" to enable auto scroll to top errors section. Add attribute "novalidate" to disable browser's native form validation.</p>
<p>Notice, the Submit button is outside the form. Attribute "form" is added on the button to target the form to submit.</p>
<p>If form is not valid when submitted modal auto scrolls to error messages at the top. If form is valid appropriate action can be taken using ng-submit directive.</p>


<div class="t-popup" ng-controller="dialogFormExampleController as ctrl">
    <inv-dialog dialog-title="'Basic Form Dialog'" dialog-size="small" dialog-type="form">
        <dialog-content>
            <form id="basicForm" name="ctrl.basicDialogForm" class="c-generalForm c-fieldsets c-fieldsets--dialog" novalidate ng-submit="ctrl.onSubmit()">
                <form-error-messages class="c-form"></form-error-messages>
                <fieldset class="c-fieldset">
                    <div class="c-fieldset-instruction u-mb+">
                        All fields are required
                    </div>

                    <div class="c-fieldset-item is-required" form-field-error-state="inputField1">
                        <label for="inputField1">Input field 1</label>
                        <input type="text" name="inputField1" ng-model="ctrl.data.inputField1" id="inputField1" value="Monthly Purchase Detail" required/>
                        <form-field-error-messages name="inputField1"></form-field-error-messages>
                    </div>

                    <div class="c-fieldset-item" form-field-error-state="numberOnly">
                        <label for="numberOnly">Number only</label>
                        <input type="text" name="numberOnly" ng-model="ctrl.data.numberOnly" id="numberOnly" value="Monthly Purchase Detail" pattern="[0-9]*"/>
                        <form-field-error-messages name="numberOnly"></form-field-error-messages>
                    </div>

                    <div class="c-fieldset-item is-required" form-field-error-state="inputField3">
                        <label for="inputField3">Input field 3</label>
                        <input type="text" name="inputField3" ng-model="ctrl.data.inputField3" id="inputField3" value="Monthly Purchase Detail" required/>
                        <form-field-error-messages name="inputField3"></form-field-error-messages>
                    </div>

                    <div class="c-fieldset-item is-required" form-field-error-state="associatedView">
                        <label for="associatedView">Associated View</label>
                        <div class="c-select">
                            <select id="associatedView" name="associatedView" ng-model="ctrl.data.associatedView" required>
                                <option value="1">Purchase Detail</option>
                            </select>
                        </div>
                        <form-field-error-messages name="associatedView"></form-field-error-messages>
                    </div>

                    <div class="c-fieldset-item is-required" form-field-error-state="output">
                        <label for="output">Output</label>
                        <div class="c-select">
                            <select id="output" name="output" ng-model="ctrl.data.output" required>
                                <option value="1">XML</option>
                                <option calue="2">CSV</option>
                            </select>
                        </div>
                        <form-field-error-messages name="output"></form-field-error-messages>
                    </div>

                    <div class="c-fieldset-item is-required" form-field-error-state="inputField4">
                        <label for="inputField4">Input field 4</label>
                        <input type="text" name="inputField4" ng-model="ctrl.data.inputField4" id="inputField4" value="Monthly Purchase Detail" required/>
                        <form-field-error-messages name="inputField4"></form-field-error-messages>
                    </div>

                    <div class="c-fieldset-item is-required" form-field-error-state="inputField5">
                        <label for="inputField21">Input field 5</label>
                        <input type="text" name="inputField5" ng-model="ctrl.data.inputField5" id="inputField5" value="Monthly Purchase Detail" required/>
                        <form-field-error-messages name="inputField5"></form-field-error-messages>
                    </div>

                    <div class="c-fieldset-item is-required" form-field-error-state="inputField6">
                        <label for="inputField6">Input field 6</label>
                        <input type="text" name="inputField6" ng-model="ctrl.data.inputField6" id="inputField6" value="Monthly Purchase Detail" required/>
                        <form-field-error-messages name="inputField6"></form-field-error-messages>
                    </div>
                </fieldset>
            </form>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <!--Submit button is outside of the form it submits. "form" attribute is used to target the form to submit.-->
            <button type="submit" class="c-button c-button--primary" form="basicForm" value="submit">Submit</button>
        </dialog-footer>
    </inv-dialog>
</div>

Dialog with split footer

Dialog with split footer to allow a button on the left as well as on the right

HTML

<div class="t-popup">
    <inv-dialog dialog-title="'Dialog Title'" dialog-size="small" dialog-type="content">
        <dialog-content>
            <div>
                <div>Dialog with the footer split style.</div>
            </div>
        </dialog-content>
        <dialog-footer class="c-dialog-footer--split">
            <button class="c-button">Details</button>
            <div>
                <button class="c-button">Cancel</button>
                <button class="c-button c-button--primary">Confirm</button>
            </div>
        </dialog-footer>
    </inv-dialog>
</div>

Dialog without a Close icon

Some dialogs force a user to select one of several prepared options. In these cases, it can be helpful to hide the close icon in the header bar of the dialog.

HTML

<div class="t-popup">
    <inv-dialog dialog-title="'Dialog Title'" dialog-size="small" dialog-type="content" hide-close="true">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Confirm</button>
        </dialog-footer>
    </inv-dialog>
</div>

Dialog Sizes

The size of the dialog changes depending on `dialog-size`. Form type dialogs have a fixed width, with a changing height. While content dialogs change in both width and height.

HTML

<div class="t-content" ng-controller="dialogPickerController as controller">
    <inv-multi-select
        name="controller.name"
        options="controller.options"
        filter-placeholder-text="Select..."
        show-only-options="true"
        on-selection-changed="controller.onSelectedItemsChanged">
    </inv-multi-select>
</div>

<div class="t-popup" id="TINY_FORM" style="display: none; margin-top: 30px;">
    <inv-dialog dialog-title="'Tiny Form Modal'" dialog-size="tiny" dialog-type="form">
        <dialog-content>
            <form class="c-generalForm c-fieldsets c-fieldsets--dialog">
                <fieldset class="c-fieldset">
                    <div class="c-fieldset-item">
                        <label for="tinyItem1">Tiny Field Item 1</label>
                        <input type="text" id="tinyItem1" value="Some Value"/>
                    </div>
                    <div class="c-fieldset-item">
                        <label for="tinyItem2">Tiny Field Item 2</label>
                        <input type="text" id="tinyItem2" value="Some Other Value"/>
                    </div>
                </fieldset>
            </form>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Submit</button>
        </dialog-footer>
    </inv-dialog>
</div>

<div class="t-popup" id="SMALL_FORM" style="display: none; margin-top: 30px;">
    <inv-dialog dialog-title="'Small Form Modal'" dialog-size="small" dialog-type="form">
        <dialog-content>
            <form class="c-generalForm c-fieldsets c-fieldsets--dialog">
                <fieldset class="c-fieldset">
                    <div class="c-fieldset-item">
                        <label for="smallItem1">Small Field Item 1</label>
                        <input type="text" id="smallItem1" value="Some Value"/>
                    </div>
                    <div class="c-fieldset-item">
                        <label for="smallItem2">Small Field Item 2</label>
                        <input type="text" id="smallItem2" value="Some Value"/>
                    </div>
                </fieldset>
            </form>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Submit</button>
        </dialog-footer>
    </inv-dialog>
</div>

<div class="t-popup" id="MEDIUM_FORM" style="display: none; margin-top: 30px;">
    <inv-dialog dialog-title="'Medium Form Modal'" dialog-size="medium" dialog-type="form">
        <dialog-content>
            <form class="c-generalForm c-fieldsets c-fieldsets--dialog">
                <fieldset class="c-fieldset">
                    <div class="c-fieldset-item">
                        <label for="mediumItem1">Medium Field Item 1</label>
                        <input type="text" id="mediumItem1" value="Some Value"/>
                    </div>
                    <div class="c-fieldset-item">
                        <label for="mediumItem2">Medium Field Item 2</label>
                        <input type="text" id="mediumItem2" value="Some Value"/>
                    </div>
                </fieldset>
            </form>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Submit</button>
        </dialog-footer>
    </inv-dialog>
</div>

<div class="t-popup" id="LARGE_FORM" style="display: none; margin-top: 30px;">
    <inv-dialog dialog-title="'Large Form Modal'" dialog-size="large" dialog-type="form">
        <dialog-content>
            <form class="c-generalForm c-fieldsets c-fieldsets--dialog">
                <fieldset class="c-fieldset">
                    <div class="c-fieldset-item">
                        <label for="largeItem1">Large Field Item 1</label>
                        <input type="text" id="largeItem1" value="Some Value"/>
                    </div>
                    <div class="c-fieldset-item">
                        <label for="largeItem2">Large Field Item 2</label>
                        <input type="text" id="largeItem2" value="Some Value"/>
                    </div>
                </fieldset>
            </form>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Submit</button>
        </dialog-footer>
    </inv-dialog>
</div>

<div class="t-popup" id="HUGE_FORM" style="display: none; margin-top: 30px;">
    <inv-dialog dialog-title="'Huge Form Modal'" dialog-size="huge" dialog-type="form">
        <dialog-content>
            <form class="c-generalForm c-fieldsets c-fieldsets--dialog">
                <fieldset class="c-fieldset">
                    <div class="c-fieldset-item">
                        <label for="hugeItem1">Huge Field Item 1</label>
                        <input type="text" id="hugeItem1" value="Some Value"/>
                    </div>
                    <div class="c-fieldset-item">
                        <label for="hugeItem2">Huge Field Item 2</label>
                        <input type="text" id="hugeItem2" value="Some Value"/>
                    </div>
                </fieldset>
            </form>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Submit</button>
        </dialog-footer>
    </inv-dialog>
</div>


<div class="t-popup" id="TINY_CONTENT" style="display: none; margin-top: 30px;" ng-controller="associatedScheduleExampleController">
    <inv-dialog dialog-title="'Basic Content Dialog'" dialog-size="small" dialog-type="content">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Confirm</button>
        </dialog-footer>
    </inv-dialog>
</div>

<div class="t-popup" id="SMALL_CONTENT" style="display: none; margin-top: 30px;" ng-controller="associatedScheduleExampleController">
    <inv-dialog dialog-title="'Small Content Modal'" dialog-size="small" dialog-type="content">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Confirm</button>
        </dialog-footer>
    </inv-dialog>
</div>

<div class="t-popup" id="MEDIUM_CONTENT" style="display: none; margin-top: 30px;" ng-controller="associatedScheduleExampleController">
    <inv-dialog dialog-title="'Medium Content Modal'" dialog-size="medium" dialog-type="content">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Confirm</button>
        </dialog-footer>
    </inv-dialog>
</div>

<div class="t-popup" id="LARGE_CONTENT" style="display: none; margin-top: 30px;" ng-controller="associatedScheduleExampleController">
    <inv-dialog dialog-title="'Large Content Modal'" dialog-size="large" dialog-type="content">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Confirm</button>
        </dialog-footer>
    </inv-dialog>
</div>

<div class="t-popup" id="HUGE_CONTENT" style="display: none; margin-top: 30px;" ng-controller="associatedScheduleExampleController">
    <inv-dialog dialog-title="'Huge Content Modal'" dialog-size="huge" dialog-type="content">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Confirm</button>
        </dialog-footer>
    </inv-dialog>
</div>

<div class="t-popup" id="BROAD_CONTENT" style="display: none; margin-top: 30px;" ng-controller="associatedScheduleExampleController">
    <inv-dialog dialog-title="'Broad Content Modal'" dialog-size="broad" dialog-type="content">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Confirm</button>
        </dialog-footer>
    </inv-dialog>
</div>

Dialog Custom Sizes

In certain specific, uncommon cases, the standard predefined dialog sizes are not appropriate. For these cases we allow for directly passing necessary height and width properties. Do not use this variation without direction or consultation with UX.

HTML

<div class="t-popup" id="CUSTOM_CONTENT" ng-controller="associatedScheduleExampleController">
    <inv-dialog dialog-title="'Custom Content Modal'"
        dialog-size="custom"
        dialog-type="content"
        fixed-height="263px"
        fixed-width="433px">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Cancel</button>
            <button class="c-button c-button--primary">Confirm</button>
        </dialog-footer>
    </inv-dialog>
</div>

Dialog Custom Header

Dialog with a custom header

HTML

<div class="t-popup">
    <inv-dialog dialog-size="medium" dialog-type="form">
        <dialog-header class="u-sizeFullWidth u-flex">
            <div class="u-sizeFullWidth u-flex u-flexMiddle u-flexSpaced">
                <div>
                    <span class="c-dialog-headerTitle" smart-truncate>Dialog Title</span>
                </div>
                <div>
                    <button class="c-button">Cancel</button>
                    <button class="c-button c-button--primary">Confirm</button>
                </div>
            </div>
        </dialog-header>
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
        <dialog-footer></dialog-footer>
    </inv-dialog>
</div>

Dialog No Footer

Dialog with no footer

HTML

<div class="t-popup">
    <inv-dialog dialog-title="'Dialog hide footer'" dialog-size="medium" dialog-type="form">
        <dialog-content>
            <div>
                <div>Custom dialog content.</div>
            </div>
        </dialog-content>
    </inv-dialog>
</div>

Dialog with Table

Dialog with data table

HTML

<div class="t-popup" ng-controller="associatedScheduleExampleController">
    <inv-dialog dialog-title="'Associated Schedules'" dialog-size="medium" dialog-type="content" is-flush="true">
        <dialog-content>
            <div class="c-datatable c-datatable--readonly">
                <div class="s-datatable"
                     ui-grid="{ data: tableData,
                                enableSorting: false,
                                enableCellEdit: false,
                                enableHorizontalScrollbar: 0,
                                enableVerticalScrollBar: 1,
                                columnDefs: columnDefs }">
                </div>
            </div>
        </dialog-content>
        <dialog-footer>
            <button class="c-button">Done</button>
        </dialog-footer>
    </inv-dialog>
</div>

Add Associations Table Dialog

Common presentation component for Invision add associations table view dialog pattern

HTML

<div ng-controller="AddAssociationExampleController as ctrl">
    <div class="t-content c-content">
        <p>The Add Associations Dialog is most often used in coordination with the popup manager.</p>
        <p>You can add the binding <em>'dialog-size'</em> to change the size of the dialog, size <em>'huge'</em> is set by default</p>
        <p>Here, we show a dialog in coordination with the popup manager with it's suggested usage.</p>
        <div>
            <button class="c-button" ng-click="ctrl.openDefaultExampleDialog()">Open Dialog</button>
        </div>
    </div>
    <p>Example filterbarList:</p>
    <inv-popup-vault>
        <div inv-popup="ctrl.defaultExampleDialogConfig"
                ng-if="ctrl.defaultExampleDialogOpened">
            <inv-add-association-dialog
                add-association-dialog-title="ctrl.defaultExample.addUsageRuleDialogTitle"
                apply-associations="ctrl.applyDefaultExampleDialog.bind(ctrl)"
                apply-button-text="ctrl.defaultExample.applyButtonText"
                close-add-association="ctrl.closeDefaultExampleDialog.bind(ctrl)"
                currently-associated-ids="ctrl.defaultExample.alreadyAssociatedIds"
                display-page-information="true"
                filterbar-list="ctrl.defaultExample.filterbarList"
                filterbar-selection-changed="ctrl.handleFilterbarSelectionChanged.bind(ctrl)"
                include-number-in-add-button="true"
                grid-app-scope-object="ctrl.defaultExample.gridAppScopeObject"
                is-searching="false"
                no-search-results-message="ctrl.defaultExample.noSearchResultsMessage"
                number-of-pages="ctrl.defaultExample.pageCount"
                page-number="ctrl.defaultExample.currentPage"
                page-size="ctrl.defaultExample.pageSize"
                page-size-options-visible="true"
                page-size-option-selection-changed="$ctrl.handlePageSizeOptionSelected.bind($ctrl)"
                record-count="ctrl.defaultExample.recordCount"
                search-association="ctrl.searchAssociation"
                table-data="ctrl.defaultExample.tableData">
            </inv-add-association-dialog>
        </div>
    </inv-popup-vault>
    <pre ng-bind="ctrl.defaultExample.filterbarList | json"></pre>
</div>

Add Associations Dialog Search With Options

Common presentation component for Invision add associations table view and search with options

HTML

<div class="t-content c-content" ng-controller="AddAssociationExampleController as ctrl">
    <div class="c-content-headingContainer">
        <p>The Add Associations Dialog is most often used in coordination with the popup manager.</p>
        <p>Inv single select search is included in add association modal as part of this example</p>
        <p></p>
        <button class="c-button"
        ng-click="ctrl.openSingletonExampleDialog()">
            <div class="c-buttonText">Open Dialog</div>
        </button>
    </div>
    <inv-popup-vault>
        <div inv-popup="ctrl.singletonExampleDialogConfig"
            ng-if="ctrl.singletonExampleDialogOpened">
            <inv-add-association-dialog
                add-association-dialog-title="ctrl.singletonExample.addUsageRuleDialogTitle"
                apply-associations="ctrl.applySingletonExampleDialog.bind(ctrl)"
                apply-button-text="ctrl.singletonExample.applyButtonText"
                close-add-association="ctrl.closeSingletonExampleDialog.bind(ctrl)"
                currently-associated-ids="ctrl.singletonExample.alreadyAssociatedIds"
                display-page-information="true"
                filterbar-list="ctrl.singletonExample.filterbarList"
                filterbar-selection-changed="ctrl.handleFilterbarSelectionChanged.bind(ctrl)"
                grid-app-scope-object="ctrl.singletonExample.gridAppScopeObject"
                is-searching="false"
                no-search-results-message="ctrl.singletonExample.noSearchResultsMessage"
                number-of-pages="ctrl.singletonExample.pageCount"
                page-number="ctrl.singletonExample.currentPage"
                page-size="ctrl.singletonExample.pageSize"
                record-count="ctrl.singletonExample.recordCount"
                single-select-search-options="ctrl.singletonExample.singleSelectSearchOptions"
                search-association="ctrl.singletonExample.searchAssociation"
                single-select-search="true"
                single-selection="ctrl.singletonExample.singleSelection"
                table-data="ctrl.singletonExample.tableData">
            </inv-add-association-dialog>
        </div>
    </inv-popup-vault>
</div>

Single Association Modal

Common presentation component for Invision single associations modal pattern

HTML

<div class="t-content c-content" ng-controller="SingleAssociationModalExampleController as $ctrl">
    <div class="c-content-headingContainer">
        <button class="c-button"
                ng-click="$ctrl.openDialog()">
            <div class="c-buttonText">Open Dialog</div>
        </button>
    </div>

    <inv-popup-vault>
        <div inv-popup="$ctrl.singleAssociationPopupConfig"
            ng-if="$ctrl.singleAssociationDialogOpened">
            <single-association-modal config="$ctrl.singleAssociationPopupConfig"
                apply-button-text="'ADD'"
                on-close="$ctrl.closeAddAssocModal.bind($ctrl)"
                on-success="$ctrl.applyAssociations.bind($ctrl)"
                items-collection="$ctrl.associationList"
                selected-item="$ctrl.selectedValue"
                dialog-title="'Add Single Association'">
            </single-association-modal>
        </div>
    </inv-popup-vault>
</div>

Single Association Modal With Filters

Common presentation component for Invision single associations modal with active/disabled filters

HTML

<div class="t-content c-content" ng-controller="SingleAssociationModalExampleController as $ctrl">
    <div class="c-content-headingContainer">
        <button class="c-button"
                ng-click="$ctrl.openDialog()">
            <div class="c-buttonText">Open Dialog</div>
        </button>
    </div>

    <inv-popup-vault>
        <div inv-popup="$ctrl.singleAssociationPopupConfig"
            ng-if="$ctrl.singleAssociationDialogOpened">
            <single-association-modal config="$ctrl.singleAssociationPopupConfig"
                apply-button-text="'ADD'"
                dialog-title="'Add Single Association'"
                filters="$ctrl.filters"
                items-collection="$ctrl.associationList"
                on-close="$ctrl.closeAddAssocModal.bind($ctrl)"
                on-success="$ctrl.applyAssociations.bind($ctrl)"
                selected-item="$ctrl.selectedValue">
            </single-association-modal>
        </div>
    </inv-popup-vault>
</div>