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 |