Svelte Modal Component for Bootstrap (Svelte Bootstrap Modal)
Svelte Modal Component for Bootstrap (Bootstrap’s modal plugin in svlete applications), can be used with sapper or standalone with svelte
Simple Bootstrap Modal Example
npm install --save-dev sv-bootstrap-modal
Bootstrap CSS needs to be present globally in project
<script>
import Modal from "sv-bootstrap-modal";
let isOpen = false;
</script>
<Modal bind:open={isOpen}>
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" on:click={() => (isOpen = false)}>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Woohoo, you're reading this text in a modal!</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" on:click={() => (isOpen = false)}>Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</Modal>
<button class="btn btn-primary" on:click={()=> (isOpen = true)}>Open Modal</button>
Below are the classes which should be used to change the sizes of modal
|Small|Large|Extra large|
|—-|—-|—-|
| .modal-sm | .modal-lg | .modal-xl |
<script>
import Modal from "sv-bootstrap-modal";
let isOpen = false;
</script>
<Modal bind:open={isOpen} dialogClasses="modal-lg">
....
</Modal>
<button class="btn btn-primary" on:click={()=> (isOpen = true)}>Open Modal</button>
Add modal-dialog-centered
to dialogClasses
option
<script>
import Modal from "sv-bootstrap-modal";
let isOpen = false;
</script>
<Modal bind:open={isOpen} dialogClasses="modal-dialog-centered">
....
</Modal>
<button class="btn btn-primary" on:click={()=> (isOpen = true)}>Open Modal</button>
Add modal-dialog-scrollable
to dialogClasses
option
<script>
import Modal from "sv-bootstrap-modal";
let isOpen = false;
</script>
<Modal bind:open={isOpen} dialogClasses="modal-dialog-scrollable">
....
</Modal>
<button class="btn btn-primary" on:click={()=> (isOpen = true)}>Open Modal</button>
Name | Type | Default | Description |
---|---|---|---|
backdrop | boolean | true | Includes a modal-backdrop element. |
ignoreBackdrop | boolean | true | It will ignore backdrop click close if true modal will not close on outside click |
keyboard | boolean | true | Closes the modal when escape key is pressed |
dialogClasses | string | “” | You can add any number of classes to .modal-dialog element |
labelledby | string | “” | Used for aria-labelledby |
describedby | string | “” | Used for aria-describedby |
onOpened | function | Empty function(noop) | Can be Used for callbacks After Modal Opened |
onClosed | function | Empty function(noop) | Can be Used for callbacks After Modal Closed |