sv-bootstrap-modal (Svelte Bootstrap Modal)

Svelte Modal Component for Bootstrap (Bootstrap’s modal plugin in svlete applications), can be used with sapper or standalone with svelte

Demo

Simple Bootstrap Modal Example

How to install

npm install --save-dev sv-bootstrap-modal

Requirements

Bootstrap CSS needs to be present globally in project

Usage

Simple Usage

Example

<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">&times;</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">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>

Modal Sizing

Below are the classes which should be used to change the sizes of modal |Small|Large|Extra large| |---|---|---| | .modal-sm | .modal-lg | .modal-xl |

Example

<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>

Vertically centered

Add modal-dialog-centered to dialogClasses option

Example

<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>

Scrolling long content (Scrollable Modal)

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>

Component Options

|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|