---
title: uiModalService
summary: Migration guide for the uiModalService in OHIF 3.10, covering props that remain unchanged, renamed props (containerDimensions to containerClassName), removed props (movable, isOpen, contentDimensions), and automatic handling of modal closing.
---


## ModalService


### Props Kept same as before

| Prop | Description |
|------|-------------|
| `content` | This is now expected to be a *React component type* (a function or class that returns JSX) |
| `contentProps` | This continues to be the way to pass data *to* your custom dialog component. However, several specific props that *used* to be passed here (like `onClose`, `actions`) are no longer valid. |
| `title` | The title text to display in the dialog header. |
| `shouldCloseOnEsc` | Allows closing the modal when the escape key is pressed. |
| `shouldCloseOnOverlayClick` | Allows closing the modal when the overlay is clicked. |

### Renamed Props:

| Prop | Description |
|------|-------------|
| `containerDimensions` | renamed to `containerClassName` |



### Removed Props:

| Prop | Description |
|------|-------------|
| `movable` | It's removed because modals shouldn't be movable. If you need to move a dialog, use `uidDialogService` and `dialogs` instead. |
| `isOpen` | always assumed `true` when `show` is called. |
| `contentDimensions` | Removed, it is now component's responsibility to set the size for the content |
| `customClassName` | renamed to `className` |
| `closeButton` | The component now manages modal closing internally. If you need a close button, you can add one, perhaps by checking out the `FooterActions` component. |




**Migration Steps:**


### Rename of `containerDimensions` to `containerClassName` and removal of `contentDimensions`


Before

```js
uiModalService.show({
  title: 'Download High-Quality Image',
  content: CornerstoneViewportDownloadForm,
  contentProps: {
    activeViewportId,
  },
  containerDimensions: 'w-[70%] max-w-[900px]',
  contentDimensions: 'h-[493px] w-[460px] pl-[12px] pr-[12px]',
});
```

After: the component is responsible for setting the size

```js
function CornerstoneViewportDownloadForm({ activeViewportId }) {
  return (
    <div className="h-[493px] w-[460px] pl-[12px] pr-[12px]">
      <h2 className="text-lg font-bold">Download Image</h2>
      <p>Viewport ID: {activeViewportId}</p>
      <button className="mt-4 bg-blue-500 text-white p-2 rounded">Download</button>
    </div>
  );
}

// Show the modal
uiModalService.show({
  title: 'Download High-Quality Image',
  content: CornerstoneViewportDownloadForm,
  contentProps: { activeViewportId },
  containerClassName: 'w-[70%] max-w-[900px]',
});
```




### onClose
Previously, you had to pass in the `onClose` as `hide` function automatically added to the component.

```diff
- uiModalService.show({
-   title: 'Untrack Series',
-   content: UntrackSeriesModal,
-   contentProps: { onConfirm },
-   onClose: () => uiModalService.hide(),
- });

+ uiModalService.show({
+   title: 'Untrack Series',
+   content: UntrackSeriesModal,
+   contentProps: {
+     onConfirm,
+     hide, // passed in automatically in the background
+   },
+ });
```
