---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Create modals in UI Builder

# Create modals in UI Builder {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Create modals in UI Builder

In ServiceNow's UI Builder (Yokohama release), you can use modals---also known as dialogs---to overlay content windows and capture user attention.
Modals prevent interaction with the underlying page until the modal is closed, making them ideal for alerts, confirmations, and calls to action.
They help ensure users acknowledge important information or decisions before proceeding.
Show full answer Show less  

## Key Features

* **Preconfigured Modals:** UI Builder provides ready-to-use modal types to save development time.
* **Modal Content:** Modals can include static or dynamic text, forms, images, and buttons.
* **Modal Anatomy:** Each modal can have a header, content area, a close button (which cancels without action), and one or more action buttons.
* **Modal Types:**
  * **Alert:** Delivers informational messages, such as warning a user about irreversible actions.
  * **Confirm:** Asks users to confirm an action with customizable button labels (e.g., Yes/Cancel).
  * **Confirm and Destroy:** A stronger confirmation modal typically used for destructive actions like deletes.
  * **Custom:** Allows full customization using layouts, components, events, data resources, and CSS styling to tailor the modal's design and behavior.
  * **iframe:** Embeds external content into modals via iframe URLs and data.
  * **Modal Viewport:** Supports dynamic content injection through event bindings using client scripts.
* **Event Handlers:** You can add event handlers either on the component triggering the modal or on the modal itself to define actions such as primary or secondary button clicks. These handlers can invoke data resources, increasing interactivity and responsiveness.

## Practical Application

To implement a modal, add it to a UI Builder component (like a delete button), configure its content and appearance, then set up event handlers to respond to user actions. For example, displaying a confirmation modal when a user attempts to delete a record ensures deliberate user interaction and reduces errors.  
Use modals in UI Builder with components to provide alerts or calls
to action for a user. UI Builder comes with modals to save time and
effort.

## What Modals are {#Modals-overview__section_prj_tdc_1zb}

Modals, also known as dialogs, are windows that overlay another content window. Modals take control of the user experience. Users cannot interact with the overlaid window until the modal is closed. Modals can contain different types of content such as:

* Static text
* Dynamic text
* Forms
* Images
* Buttons
{#Modals-overview__ul_dwp_vdc_1zb}

UI Builder has preconfigured modals available.
You can add a modal to your component. Then, configure the content of the modal, and how it displays on the screen. Add an event handler to the modal to perform an action when a user selects it. The action can
alert a user about something, or ask a user to confirm an action. A modal is a way to ensure that a user knows what is happening. For example, a modal may ask a user to confirm a selection before continuing whatever action they
are performing on the main page.

## Modal Anatomy {#Modals-overview__section_ezg_pfc_1zb}

Modals in UI Builder can have:

* Modal header
* Modal content
* Close dialog button (no action taken by the modal)
* At least one Modal button (action can be taken by the modal)
{#Modals-overview__ul_tcy_qfc_1zb}

## Modal types {#Modals-overview__section_ezr_vvn_wnb}

Different types of modals are available in UI Builder, as shown in the following table.
{#Modals-overview__table_bt3_t4h_wnb__entry__2}

| Modal type | Description |
|-|-|
| Alert | An Alert modal provides information relating to the component action. For example, when a user presses a delete button, you could have an alert pop-up that lets the user know they cannot undo a delete action. |
| Confirm | A Confirm modal asks a user to confirm the component action. For example, when a user presses a delete button, the user would have to confirm the deletion of data. You can choose the confirm options from the primary and secondary button label fields, such as Yes/Cancel. |
| Confirm and destroy | A Confirm and destroy modal is more directive, usually relating to deleting or erasing content. It lets the user know the seriousness of an action, and asks them whether they want to proceed with the action. |
| Custom | Custom modals address scenarios that are not handled using the standard modals. Custom modals can be thought of as a container component on a modal. You can add a custom layout, components, events, and data resources just like you do on a page. The custom modal uses layouts to let you fully design what information you want in the modal. Layouts also decide where the information sits within the modal screen. You can use Cascading Style Sheets (CSS) styling to change the visual look of the modal. |
| iframe | Use iframe to bring content into your modal from existing iframe content from a URL and data. |
| Modal viewport | Dynamically pass content into your viewport modal through an event binding using a client script. |
[ ]

{#Modals-overview__table_bt3_t4h_wnb}

## Event handlers and modals {#Modals-overview__section_n4p_dvl_xnb}

Expose events to modals to handle call-to-action events. For example, a primary action,
secondary action, and so on. You configure the data by adding an event handler and
invoking a data resource. It is as simple as adding a new event handler for the
component that has a modal. Or you can add an event handler to the modal itself. You
select the event that you want associated with the component or modal and add it. See
[Add modal to component](https://www.servicenow.com/docs/nNvYB5dTOSmoQMeEAaFA6g "Learn how to add a modal in UI Builder. A modal is a window that appears when you click a component. For example, a modal might display when a delete button component is clicked, prompting the user to confirm deleting a record.") for detailed
instructions.
* **[Add modal to component](https://www.servicenow.com/docs/nNvYB5dTOSmoQMeEAaFA6g)**   
  Learn how to add a modal in UI Builder. A modal is a window that appears when you click a component. For example, a modal might display when a delete button component is clicked, prompting the user to confirm deleting a record.