]> git.ipfire.org Git - thirdparty/bootstrap.git/commit
Replace Modal with new Dialog component (#41917)
authorMark Otto <markd.otto@gmail.com>
Tue, 16 Dec 2025 19:19:06 +0000 (11:19 -0800)
committerMark Otto <markdotto@gmail.com>
Fri, 9 Jan 2026 04:08:32 +0000 (20:08 -0800)
commita19a8fb911c2348c7e6c8c80c5fd1d3c0c3ba2ba
tree9578e32bea55648892d7cb85954054237be45f2d
parentf89e29786c5bed04dcdbd9708382abe8dbb595d4
Replace Modal with new Dialog component (#41917)

* Add Dialog component using native HTML dialog element

New component that leverages the native HTML <dialog> element for modals
and non-modal dialogs with built-in backdrop and accessibility support.

Features:
- Modal dialogs using showModal() with automatic backdrop
- Non-modal dialogs using show() for persistent UI elements
- Static backdrop option (prevents close on outside click)
- Keyboard support (Escape to close, focus trapping for modals)
- Smooth open/close animations via CSS
- Events: show, shown, hide, hidden, hidePrevented
- Data API for toggling with data-bs-toggle="dialog"

JavaScript:
- js/src/dialog.js - Main component class
- js/tests/unit/dialog.spec.js - Unit tests
- js/tests/visual/dialog.html - Visual test page

SCSS:
- scss/_dialog.scss - Component styles

Docs:
- Add dialog component documentation
- Update modal docs with dialog references

* Modal examples now Dialog examples, needs improvement

* Remove all of Modal

* real words

* Fix layout while I'm here

* Lint Markdown

* New dialog size options
31 files changed:
js/dist/modal.js [deleted file]
js/dist/modal.js.map [deleted file]
js/index.esm.js
js/index.umd.js
js/src/dialog.js [new file with mode: 0644]
js/src/modal.js [deleted file]
js/tests/unit/dialog.spec.js [new file with mode: 0644]
js/tests/unit/modal.spec.js [deleted file]
js/tests/visual/dialog.html [new file with mode: 0644]
js/tests/visual/modal.html [deleted file]
scss/_dialog.scss [new file with mode: 0644]
scss/_modal.scss [deleted file]
scss/_variables.scss
scss/bootstrap.scss
site/data/examples.yml
site/data/sidebar.yml
site/src/assets/examples/cheatsheet-rtl/index.astro
site/src/assets/examples/cheatsheet/index.astro
site/src/assets/examples/dialogs/dialogs.css [new file with mode: 0644]
site/src/assets/examples/dialogs/index.astro [new file with mode: 0644]
site/src/assets/examples/modals/index.astro [deleted file]
site/src/assets/examples/modals/modals.css [deleted file]
site/src/assets/partials/snippets.js
site/src/components/home/Plugins.astro
site/src/content/docs/components/dialog.mdx [new file with mode: 0644]
site/src/content/docs/components/modal.mdx [deleted file]
site/src/content/docs/components/offcanvas.mdx
site/src/content/docs/components/popovers.mdx
site/src/content/docs/customize/optimize.mdx
site/src/content/docs/getting-started/javascript.mdx
site/src/content/docs/utilities/z-index.mdx