---
sourceDocument: Xanadu API Reference
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - en-US

ft:publication_title :

    - Xanadu API Reference

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# cabrillo.modal - Client

# cabrillo.modal - Client {#ariaid-title1}

* Release version: Xanadu
* 
* Updated August 1, 2024
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Cabrillo JS
functions for presenting web content inside of native modals.

## cabrillo.modal - dismissModal(Object data) {#ariaid-title2}

Use to dismiss a modal that has been presented with the
presentModal() function.
A presented modal is responsible for dismissing itself and passing any results back to the
presenting context. The dismissModal() function must be called from the
presented context not from the presenting context.
{#CM-dismissModal_O__table_wmf_jzm_wbb__entry__3}

| Name | Type | Description |
|-|-|-|
| data | Object | Optional. An object to pass back to the presenting context when the presented context dismisses itself. |
[Table 1. Parameters]

{#CM-dismissModal_O__table_wmf_jzm_wbb} {#CM-dismissModal_O__table_xmf_jzm_wbb__entry__2}

| Type | Description |
|-|-|
| promise | If successful, an unresolved object, otherwise an error. |
[Table 2. Returns]

{#CM-dismissModal_O__table_xmf_jzm_wbb}  

    // Any object can be passed back to the presenting context when the presented context dismisses itself.
    var results = {
        team: 'Mobile'
        company: 'ServiceNow'
    }

    cabrillo.modal.dismissModal(results).then(function() {
        console.log('Modal was dismissed and results were passed to presenting context.');
    }, function(error) {
        console.log(error);
    });

## cabrillo.modal - presentModal( String title, String url, String closeButtonStyle, String
modalPresentationStyle) {#ariaid-title3}

Presents content in a native modal interface.
{#CM-presentModal_S_S_S_S__table_zcl_dxm_wbb__entry__3}

| Name | Type | Description |
|-|-|-|
| title | String | Title of the modal interface. |
| url | String | The URL to open the modal. This must be an internal instance URL (fully qualified or relative; a relative URL is preferred). |
| closeButtonStyle | String | Close button style of the modal interface. Possible values: * cabrillo.modal.CLOSE_BUTTON_STYLE_CANCEL * cabrillo.modal.CLOSE_BUTTON_STYLE_CLOSE * cabrillo.modal.CLOSE_BUTTON_STYLE_DONE {#CM-presentModal_S_S_S_S__ul_sgf_hcm_pyb}For more information, see [Cabrillo JS constants - close button styles](https://servicenow-prod.fluidtopics.net/WtDkBSAY1qbIxQA~Yux4Ow#cabrillo-close-button-styles "Constants to use when setting the close button style of modal interfaces."). |
| modalPresentationStyle | String | Presentation style of the modal interface. Possible values: * cabrillo.modal.MODAL_PRESENTATION_STYLE_FULL_SCREEN * cabrillo.modal.MODAL_PRESENTATION_STYLE_FORM_SHEET {#CM-presentModal_S_S_S_S__ul_ald_sbm_pyb}For more information, see [Cabrillo JS constants - modal presentation styles](https://servicenow-prod.fluidtopics.net/WtDkBSAY1qbIxQA~Yux4Ow#cabrillo-modal-present-styles "Constants to use when setting the presentation style of modal interfaces."). Note: This parameter is only supported on Apple iOS. |
[Table 3. Parameters]

{#CM-presentModal_S_S_S_S__table_zcl_dxm_wbb} {#CM-presentModal_S_S_S_S__table_adl_dxm_wbb__entry__2}

| Type | Description |
|-|-|
| promise | If successful, a Cabrillo.ModalResponse object, otherwise an error. |
[Table 4. Returns]

{#CM-presentModal_S_S_S_S__table_adl_dxm_wbb}  
Present a native modal that loads a custom URL. This presents a custom Service Portal page
in a form sheet style modal. The promise is fulfilled when the modal is dismissed. See the
dismissModal() function for custom dismissal capabilities.

    cabrillo.modal.presentModal('Portal Page',
        '/$sp.do?id=my_modal_page',
        cabrillo.modal.CLOSE_BUTTON_STYLE_CLOSE,
        cabrillo.modal.MODAL_PRESENTATION_STYLE_FORM_SHEET
    ).then(function(response) {
        // The results from the modal are in a results key on the response object.
        var results = response && response.results ? response.results : null;

        if (results) {
            console.log('Modal dismissed with results.', results);
        } else {
            console.log('Modal dismissed without results.');
        }
    }, function(error) {
        console.log(error);
    });