https://github.com/kant2002/bootstrap-dialog
JS-less dialogs for Bootstrap
https://github.com/kant2002/bootstrap-dialog
bootstrap bootstrap5 dialog
Last synced: about 1 month ago
JSON representation
JS-less dialogs for Bootstrap
- Host: GitHub
- URL: https://github.com/kant2002/bootstrap-dialog
- Owner: kant2002
- Created: 2025-12-23T10:21:00.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2025-12-23T10:32:02.000Z (6 months ago)
- Last Synced: 2025-12-25T00:31:59.740Z (6 months ago)
- Topics: bootstrap, bootstrap5, dialog
- Language: HTML
- Homepage: https://kant2002.github.io/bootstrap-dialog/
- Size: 3.91 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Bootsrtap + Dialog = ❤️
=======================
This repo shows how you can use Bootstrap with tag, using Command Invoker API which is shipped even in Safari.
# Applications
This techniques interesting when using Bootstrap with application modern hybrid full-stack solutions, like Blazor, Next.js which control all your interactivity.
# Motivation
Bootstrap want to control how do you open and close your modal popups, so do your full-stack framework. If you use this approach, you can use Bootstrap CSS without bringing JS and writing/using bridge code or separate integration library. At least you can delay this step.
Second motivation is to have as less JS in the browser as possible for simple cases.
# Idea
Instead of relying on `data-bs-toggle="modal"`, `data-bs-dismiss="modal"` and `data-bs-target="#exampleModal"`, you can use `command="show-modal"`, `command="close"` and `commandfor="exampleModal"` respectively.
You also need to override browser styles a bit.
```css
dialog.modal {
padding: 0;
max-width: fit-content;
max-height: fit-content;
border: none;
background: transparent;
}
dialog.modal[open] {
display: block !important;
}
```
For backdrop dismissal, you need to use `closedby="any"` on the `dialog` tag.