Sv Bootstrap Modal
Svelte Modal Component for Bootstrap (Svelte Bootstrap Modal)
sv-bootstrap-modal
Bootstrap 5 modal component for Svelte 5.
Demo
Installation
npm install sv-bootstrap-modal
Requirements
- Node >= 24
- Svelte 5
- Bootstrap 5 CSS included globally in your project
Usage
Basic
<script>
import Modal from 'sv-bootstrap-modal';
let isOpen = $state(false);
</script>
<button class="btn btn-primary" onclick={() => (isOpen = true)}
>Open Modal</button
>
<Modal bind:open={isOpen}>
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" onclick={() => (isOpen = false)}
></button>
</div>
<div class="modal-body">Modal body text.</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
onclick={() => (isOpen = false)}>Close</button
>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</Modal>
Sizing
Pass Bootstrap dialog classes via dialogClasses:
| Size | Class |
|---|---|
| Small | modal-sm |
| Large | modal-lg |
| Extra large | modal-xl |
<Modal bind:open={isOpen} dialogClasses="modal-lg">...</Modal>
Vertically centered
<Modal bind:open={isOpen} dialogClasses="modal-dialog-centered">...</Modal>
Scrollable
<Modal bind:open={isOpen} dialogClasses="modal-dialog-scrollable">...</Modal>
No animation
<Modal bind:open={isOpen} animated={false}>...</Modal>
Props
| Name | Type | Default | Description |
|---|---|---|---|
open |
boolean |
false |
Controls modal visibility; use bind:open |
backdrop |
boolean |
true |
Renders the backdrop overlay |
ignoreBackdrop |
boolean |
false |
When true, clicking the backdrop does not close the modal |
keyboard |
boolean |
true |
Closes the modal on Escape key |
animated |
boolean |
true |
Enables fade/fly transitions |
zIndex |
number |
undefined |
Override z-index on the modal (backdrop gets zIndex - 5) |
dialogClasses |
string |
"" |
Extra classes added to .modal-dialog |
labelledby |
string |
"" |
aria-labelledby value |
describedby |
string |
"" |
aria-describedby value |
onOpened |
function |
() => {} |
Callback fired after the modal finishes opening |
onClosed |
function |
() => {} |
Callback fired after the modal finishes closing |
Accessibility
- Focus moves to the first focusable element (or the modal itself) on open and returns to the previously focused element on close.
- Tab and Shift+Tab are trapped within the modal while it is open.
- Escape closes the modal when
keyboardistrue.
License
