---
title: "Breaking: #107443 - Migrate Modal component from Bootstrap to native dialog"
manual: "TYPO3 Core Changelog"
version: "main"
permalink: "https://docs.typo3.org/permalink/changelog:breaking-107443-1761040245"
source: "Changelog/14.0/Breaking-107443-MigrateModalComponentFromBootstrapToNativeDialog.rst"
typo3-version: "14.0"
typo3-major: 14
type: "breaking"
issue: 107443
forge: "https://forge.typo3.org/issues/107443"
tags: ["Backend", "JavaScript", "NotScanned", "ext:backend"]
rendered: "2026-09-20T18:31:11+00:00"
---

# Breaking: #107443 - Migrate Modal component from Bootstrap to native dialog {#breaking-107443-1761040245}

See [forge#107443](https://forge.typo3.org/issues/107443)

## Description {#description}

The TYPO3 Modal component has been migrated from Bootstrap's modal
implementation to use the native HTML `<dialog>` element. This improves
accessibility, reduces bundle size, and removes the dependency on Bootstrap's
JavaScript for modal functionality.

As part of this migration, Bootstrap's native modal events (such as
`show.bs.modal`, `shown.bs.modal`, `hide.bs.modal`, and
`hidden.bs.modal`) are no longer dispatched.

Likewise, direct Bootstrap modal API usage (for example `new Modal()` from
Bootstrap or `$(element).modal()`) is no longer supported.

## Impact {#impact}

Bootstrap modal events (`*.bs.modal`) are no longer available.

Extensions listening to these events must migrate to TYPO3's custom modal
events.

The Modal component now uses the native `<dialog>` element with updated
CSS classes and DOM structure.

Any direct manipulation of Bootstrap modal APIs will no longer work.

Extensions using `data-bs-toggle="modal"`, `data-bs-content="..."`, or
`data-bs-target` attributes to trigger modals must migrate to TYPO3's
Modal API.

## Affected installations {#affected-installations}

All installations with custom extensions that:

-   Listen to Bootstrap modal events (`show.bs.modal`, `shown.bs.modal`,
    `hide.bs.modal`, `hidden.bs.modal`)
-   Use Bootstrap's modal JavaScript API directly
    (for example `new bootstrap.Modal()`)
-   Use jQuery to control modals (for example `$(element).modal('show')`)
-   Use `data-bs-toggle="modal"` or `data-bs-content="..."` attributes
-   Manipulate modal DOM structures or classes expecting Bootstrap markup

## Migration {#migration}

### Event migration {#event-migration}

Replace Bootstrap modal event listeners with TYPO3's custom modal events.
Event listeners must be attached to the modal instance returned by the Modal
API, not queried from the DOM.

**Before:**

```javascript
const modalElement = document.querySelector('.modal');
modalElement.addEventListener('show.bs.modal', (event) => {
  console.log('Modal is about to be shown');
});
modalElement.addEventListener('shown.bs.modal', (event) => {
  console.log('Modal is now visible');
});
modalElement.addEventListener('hide.bs.modal', (event) => {
  console.log('Modal is about to be hidden');
});
modalElement.addEventListener('hidden.bs.modal', (event) => {
  console.log('Modal is now hidden');
});
```

**After:**

```javascript
import Modal from '@typo3/backend/modal';
import Severity from '@typo3/backend/severity';

const modal = Modal.show(
  'My Modal Title',
  'This is the modal content',
  Severity.info
);

modal.addEventListener('typo3-modal-show', (event) => {
  console.log('Modal is about to be shown');
});
modal.addEventListener('typo3-modal-shown', (event) => {
  console.log('Modal is now visible');
});
modal.addEventListener('typo3-modal-hide', (event) => {
  console.log('Modal is about to be hidden');
});
modal.addEventListener('typo3-modal-hidden', (event) => {
  console.log('Modal is now hidden');
});
```

### Bootstrap API migration {#bootstrap-api-migration}

Replace Bootstrap modal API calls with TYPO3's Modal API.

Do not instantiate Bootstrap modals or manipulate modal DOM elements directly.

**Before:**

```javascript
import { Modal } from 'bootstrap';

const modalElement = document.querySelector('.modal');
const bsModal = new Modal(modalElement);
bsModal.show();
bsModal.hide();
```

**After:**

```javascript
import Modal from '@typo3/backend/modal';
import Severity from '@typo3/backend/severity';

// Show a simple modal
Modal.show(
  'My Modal Title',
  'This is the modal content',
  Severity.info,
  [
    {
      text: 'Close',
      btnClass: 'btn-default',
      trigger: (event, modal) => modal.hideModal()
    }
  ]
);

// Dismiss the current modal
Modal.dismiss();
```

### Data attribute migration {#data-attribute-migration}

Replace Bootstrap's `data-bs-toggle` and `data-bs-target` attributes
with TYPO3's modal trigger API.

**Before:**

```html
<button type="button"
        data-bs-toggle="modal"
        data-bs-target="#myModal"
        data-bs-content="Are you sure?">
  Open Modal
</button>
```

**After:**

```html
<button type="button"
        class="t3js-modal-trigger"
        data-title="Confirmation"
        data-content="Are you sure?"
        data-severity="warning"
        data-button-close-text="Cancel"
        data-button-ok-text="Confirm">
  Open Modal
</button>
```

Alternatively, use the JavaScript API directly:

```javascript
import Modal from '@typo3/backend/modal';
import Severity from '@typo3/backend/severity';

document.querySelector('button').addEventListener('click', (event) => {
  Modal.confirm(
    'Confirmation',
    'Are you sure?',
    Severity.warning
  );
});
```