Svelte Bootstrap Modal

Svelte Modal - Bootstrap 4 & Material Design

Svelte Bootstrap modal is lightweight, but powerful & multipurpose popup. Learn how to manipulate size, styles & position. Multiple examples and detailed tutorial.

The Modal is a dialog box/popup window which can be used for lightboxes, user notifications, UI enhancements, e-commerce components and many other cases.

It's easily customized. You can manipulate size, position, and content.

This documentation presents the basic options and examples of modals. If you need more advanced help have a look at additional pages of the documentation listed below:

Basic Example

<script>

  import {MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter} from "mdbsvelte";

  let isOpen = false;

  function toggle() {
    isOpen = !isOpen
  }

</script>
<MDBContainer>
  <MDBBtn on:click={toggle}>Modal</MDBBtn>
  <MDBModal isOpen={isOpen} toggle={toggle}>
    <MDBModalHeader toggle={toggle}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      (...)
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={toggle}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
</MDBContainer>

Position And Size

To change the position or size of the modal add one of the following props to the modal component.

Central modal

Note: Medium size is a default value, so there isn't a dedicated prop for it.

size='sm Small Modal

size='lg' Large Modal

size='fluid' Full Width Modal

<script>

  import {MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter} from "mdbsvelte";

  let state = {
    modal2: false,
    modal3: false,
    modal4: false,
    modal5: false
  };

  function toggle(i) {
    state[`modal${i}`] = !state[`modal${i}`]
  }

</script>
<MDBContainer>
  <MDBBtn color="primary" on:click={()=>toggle(2)}>Medium modal</MDBBtn>
  <MDBModal isOpen={state.modal2} toggle={()=>toggle(2)}>
    <MDBModalHeader toggle={()=>toggle(2)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(2)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
  <MDBBtn color="primary" on:click={()=>toggle(3)}>Small modal</MDBBtn>
  <MDBModal isOpen={state.modal3} toggle={()=>toggle(3)} size="sm">
    <MDBModalHeader toggle={()=>toggle(3)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" size="sm" on:click={()=>toggle(3)}>Close</MDBBtn>
      <MDBBtn color="primary" size="sm">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
  <MDBBtn color="primary" on:click={()=>toggle(4)}>Large modal</MDBBtn>
  <MDBModal isOpen={state.modal4} toggle={()=>toggle(4)} size="lg">
    <MDBModalHeader toggle={()=>toggle(4)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(4)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
  <MDBBtn color="primary" on:click={()=>toggle(5)}>Fluid modal</MDBBtn>
  <MDBModal isOpen={state.modal5} toggle={()=>toggle(5)} size="fluid">
    <MDBModalHeader toggle={()=>toggle(5)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(5)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
</MDBContainer>

Side Modals

Note 1: To make it works properly, apart from adding a prop for a position, you also need to add special prop side to modal component.

Note 2: If you want to change modal position, add prop position equal top, right, bottom or left to the modal component.

side + position="top-right" Top Right

side + position="top-left" Top Left

side + position="bottom-right" Bottom Right

side + position="bottom-left" Bottom Left

<script>

  import {MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter} from "mdbsvelte";

  let isOpen = false;

  let state = {
    modal16: false,
    modal17: false,
    modal18: false,
    modal19: false
  };

  function toggle(i) {
    state[`modal${i}`] = !state[`modal${i}`]
  }

</script>
<MDBContainer>
  <MDBBtn color="primary" on:click={()=>toggle(16)}>Top right</MDBBtn>
  <MDBModal isOpen={state.modal16} toggle={()=>toggle(16)} side position="top-right">
    <MDBModalHeader toggle={()=>toggle(16)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(16)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>

  <MDBBtn color="primary" on:click={()=>toggle(17)}>Bottom left</MDBBtn>
  <MDBModal isOpen={state.modal17} toggle={()=>toggle(17)} side position="bottom-left">
    <MDBModalHeader toggle={()=>toggle(17)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Bottom left
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(17)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>

  <MDBBtn color="primary" on:click={()=>toggle(18)}>Bottom Right</MDBBtn>
  <MDBModal isOpen={state.modal18} toggle={()=>toggle(18)} side position="bottom-right">
    <MDBModalHeader toggle={()=>toggle(18)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(18)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>

  <MDBBtn color="primary" on:click={()=>toggle(19)}>Top left</MDBBtn>
  <MDBModal isOpen={state.modal19} toggle={()=>toggle(19)} side position="top-left">
    <MDBModalHeader toggle={()=>toggle(19)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(19)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
</MDBContainer>

Fluid modal

Note: As in the previous example - to make it works properly, apart from adding a prop for a position, you also need to add special prop fullHeight to modal component.

Note 2: If you want to change modal position, add prop position equal top, right, bottom or left to the modal component.

fullHeight + position="right" Right

fullHeight + position="left" Left

fullHeight + position="bottom" Bottom

fullHeight + position="top" Top

<script>

  import {MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter} from "mdbsvelte";

  let isOpen = false;

  let state={
    modal6: false,
    modal7: false,
    modal8: false,
    modal9: false
  };

  function toggle(i) {
    state[`modal${i}`] = !state[`modal${i}`]
  }
</script>
<MDBContainer>
  <MDBBtn color="info" on:click={()=>toggle(8)}>Right</MDBBtn>
  <MDBModal isOpen={state.modal8} toggle={()=>toggle(8)} fullHeight position="right">
    <MDBModalHeader toggle={()=>toggle(8)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(8)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
  <MDBBtn color="info" on:click={()=>toggle(9)}>Left</MDBBtn>
  <MDBModal isOpen={state.modal9} toggle={()=>toggle(9)} fullHeight position="left">
    <MDBModalHeader toggle={()=>toggle(9)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(9)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>

  <MDBBtn color="info" on:click={()=>toggle(6)}>Top</MDBBtn>
  <MDBModal isOpen={state.modal6} toggle={()=>toggle(6)} fullHeight position="top">
    <MDBModalHeader toggle={()=>toggle(6)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(6)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
  <MDBBtn color="info" on:click={()=>toggle(7)}>Bottom</MDBBtn>
  <MDBModal isOpen={state.modal7} toggle={()=>toggle(7)} fullHeight position="bottom">
    <MDBModalHeader toggle={()=>toggle(7)}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      consequat.
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={()=>toggle(7)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>

</MDBContainer>

Frame Modal

Note: As in the previous examples - to make it works properly, apart from adding a prop for a position, you also need to add special prop frame to modal component.

Note 2: If you want to change modal position, add prop position equal top, right, bottom or left to the modal component.

frame + position="bottom" Bottom

frame + position="top" Top

<script>

  import {MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter} from "mdbsvelte";

  let isOpen = false;

  let state={
    modal10: false,
    modal11: false
  };

  function toggle(i) {
    state[`modal${i}`] = !state[`modal${i}`]
  }
</script>
<MDBContainer>
  <MDBBtn color="warning" on:click={()=>toggle(10)}>Bottom</MDBBtn>
  <MDBModal isOpen={state.modal10} toggle={()=>toggle(10)} frame position="bottom">
    <MDBModalBody className="text-center">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
      <MDBBtn color="secondary" on:click={()=>toggle(10)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalBody>
  </MDBModal>
  <MDBBtn color="warning" on:click={()=>toggle(11)}>Top</MDBBtn>
  <MDBModal isOpen={state.modal11} toggle={()=>toggle(11)} frame position="top">
    <MDBModalBody className="text-center">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
      <MDBBtn color="secondary" on:click={()=>toggle(11)}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalBody>
  </MDBModal>
</MDBContainer>

Remove backdrop

To remove backdrop add backdrop={ false } prop to the modal markup

<script>

  import {MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter} from "mdbsvelte";

  let isOpen = false;

  function toggle() {
    isOpen = !isOpen
  }

</script>
<MDBContainer>
  <MDBBtn on:click={toggle}>Modal</MDBBtn>
  <MDBModal isOpen={isOpen} toggle={toggle} backdrop={false}>
    <MDBModalHeader toggle={toggle}>MDBModal title</MDBModalHeader>
    <MDBModalBody>
      (...)
    </MDBModalBody>
    <MDBModalFooter>
      <MDBBtn color="secondary" on:click={toggle}>Close</MDBBtn>
      <MDBBtn color="primary">Save changes</MDBBtn>
    </MDBModalFooter>
  </MDBModal>
</MDBContainer>

No Preview

Svelte Bootstrap Modal

Svelte Modal - Bootstrap 4 & Material Design

Basic Example

Position And Size

Side Modals

Fluid modal

Frame Modal

Remove backdrop