---
title: "Dialog Modal | Features"
description: "ZingGrid is very flexible when it comes to updating modals."
url: https://www.zinggrid.com/docs/features/dialog-modals
---

```text
experiment_id: web-retrieval-v1
fixture_id: /docs/features/dialog-modals.md
mode: provenance
representation: markdown
origin_response_id: 1c8e80629426f51ddc05549d91fc1329
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.683Z
version_nonce: 254c2dde795025b88dc716d02b6de83e
generated_at_utc: 2026-10-23T01:37:11.678Z
response_nonce: 7d024796e13fa2f087c341315231f256
```

# Dialog Modals

ZingGrid's modal dialog feature is pre-built with custom properties such as centering, masking the background, and clicking away to cancel. It is fully customizable and extensible with events.

## Open on Render

To add a dialog modal that immediately opens when the grid renders, simply include `<zg-dialog>` with an `open` attribute on it, like so:

```html
<zg-dialog open>
  <div>...</div>
</zg-dialog>
```

### Dialog on Render Grid
Here is a complete grid with a dialog modal on render:

[Example code](https://app.zingsoft.com/demos/embed/0L3OPPLM)

## Confirm/Cancel Actions

You can add a custom callback method when clicking on the "confirm" or "cancel" button in a modal by including the appropriate attribute with a function as its value, like so:

```html
<zg-dialog confirm="myConfirmFnc">
  <div>...</div>
</zg-dialog>
```

```html
<zg-dialog cancel="cancelDialogFnc">
  <div>...</div>
</zg-dialog>
```

### Custom Dialog Confirm Button Action Grid
Here is a complete grid with a custom action when the "confirm" button is clicked:

[Example code](https://app.zingsoft.com/demos/embed/4K5444CS)

### Custom Dialog Cancel Button Action Grid
Here is a complete grid with a custom action when the "cancel" button is clicked:

[Example code](https://app.zingsoft.com/demos/embed/XBVNL7I6)

## Customize Button Text

Customize the default button text values in your modal by updating the key-value pair with the `customizeDialog()` method, like so:

```javascript
const zgRef = document.querySelector('zing-grid');
zgRef.executeOnLoad(function() {
  // update  add record button confirm
  zgRef.customizeDialog('record-create', {confirm: 'I Dare you to do it!!!'});
  // first argument 'null' updates all cancel buttons in ALL modals
  zgRef.customizeDialog(null, {cancel: "DON'T DO IT!!!"});
});
```

### Custom Dialog Buttons Grid
Here is a complete grid with custom button text for the modals that appear when you try to edit the grid:

[Example code](https://app.zingsoft.com/demos/embed/Q70OOS5Y)

## Enable and Customize Label

To define the main header text within a modal, add a `label` attribute, like so:

```html
<zg-dialog label="Custom Dialog Label">
  <div>...</div>
</zg-dialog>
```

### Labelled Dialog Grid
Here is a complete grid with a custom dialog label:

[Example code](https://app.zingsoft.com/demos/embed/8VWJC4JW)

## Placement

By default, a modal will open in the center of the page and gray out the entire page background. To have the modal centered on the grid only, and gray out the grid only, add the `dialog` attribute to your `<zing-grid>` tag.

[Example code](https://app.zingsoft.com/demos/embed/XINAL854)

## Related Resources
Here are some extra resources related to this feature to help with creating your grid:

* [API Methods List](https://www.zinggrid.com/docs/api-methods#zg-dialog)
* [API Elements List](https://www.zinggrid.com/docs/api/tags/zg-dialog)