Svelte Modal

Our Svelte modals are lightweight and multi-purpose popups that are built with HTML, CSS, and JavaScript. The three primary sections of a Svelte modal are header, body, and footer. Modals are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Use Svelte’s JavaScript modal plugin to add dialogues to your site for lightboxes, user notifications, or completely custom content.

Keep reading our Bootstrap Modal examples and learn how to use it.

Example

<BaseButton
  type="primary"
  block
  className="mb-3"
  on:click={() => openModalType('classic')}>
  Launch demo modal
</BaseButton>

<Modal show={modals.classic}>
  <h5 slot="header" class="modal-title">New message to undefined</h5>
  <p class="my-4">...</p>
</Modal>

Variations

<script>
let modals = {
  classic: false,
  notice: false,
  form: false
};

const openModalType = type => {
  if (type === "classic") {
    modals.classic = true;
    modals.notice = false;
    modals.form = false;
  }
  if (type === "notice") {
    modals.notice = true;
    modals.form = false;
    modals.classic = false;
  }
  if (type === "form") {
    modals.form = true;
    modals.notice = false;
    modals.classic = false;
  }
};

const closeModalType = type => {
  if (type === "classic") {
    modals.classic = false;
  }
  if (type === "notice") {
    modals.notice = false;
  }
  if (type === "form") {
    modals.form = false;
  }
};
</script>

<div class="row">
  <div class="col-md-4">
    <BaseButton
      type="primary"
      block
      className="mb-3"
      on:click={() => openModalType('classic')}>
      Default
    </BaseButton>
  </div>
  <div class="col-md-4">
    <BaseButton
      type="warning"
      block
      className="mb-3"
      on:click={() => openModalType('notice')}>
      Notice
    </BaseButton>
  </div>
  <div class="col-md-4">
    <BaseButton
      type="default"
      block
      className="mb-3"
      on:click={() => openModalType('form')}>
      Form
    </BaseButton>
  </div>
</div>

<!--Classic modal-->
<Modal show={modals.classic}>
  <h6 slot="header" class="modal-title">Type your modal title</h6>

  <p>
    Far far away, behind the word mountains, far from the countries
    Vokalia and Consonantia, there live the blind texts. Separated
    they live in Bookmarksgrove right at the coast of the Semantics, a
    large language ocean.
  </p>
  <p>
    A small river named Duden flows by their place and supplies it
    with the necessary regelialia. It is a paradisematic country, in
    which roasted parts of sentences fly into your mouth.
  </p>

  <div slot="footer" class="w-100 justify-content-between d-flex">
    <BaseButton type="primary">Save Changes</BaseButton>
    <BaseButton
      type="link"
      className="ml-auto"
      on:click={() => closeModalType('classic')}>
      Close
    </BaseButton>
  </div>
</Modal>

<!--Notice modal-->
<Modal
  show={modals.notice}
  modalClasses="modal-danger"
  modalContentClasses="bg-gradient-danger"
  gradient={true}>
  <h6 slot="header" class="modal-title text-white">
    Your attention is required
  </h6>

  <div class="py-3 text-center">
    <i class="ni ni-bell-55 ni-3x text-white" />
    <h4 class="heading mt-4 text-white">You should read this!</h4>
    <p class="text-white">
      A small river named Duden flows by their place and supplies it
      with the necessary regelialia.
    </p>
  </div>

  <div slot="footer" class="w-100 d-flex justify-content-between">
    <BaseButton type="white">Ok, Got it</BaseButton>
    <BaseButton
      type="link"
      className="text-white ml-auto"
      on:click={() => closeModalType('notice')}>
      Close
    </BaseButton>
  </div>
</Modal>

<!--Form modal-->
<Modal show={modals.form} size="sm" bodyClasses="p-0">
  <Card
    type="secondary"
    headerClasses="bg-transparent pb-5"
    bodyClasses="px-lg-5 py-lg-5"
    className="border-0 mb-0">
    <div slot="header">
      <div class="text-muted text-center mt-2 mb-3">
        <small>Sign in with</small>
      </div>
      <div class="btn-wrapper text-center">
        <BaseButton type="neutral" icon>
          <span class="btn-inner--icon">
            <img
              src="../../img/icons/common/github.svg"
              alt="Image" />
          </span>
          <span class="btn-inner--text">Github</span>
        </BaseButton>
        <BaseButton type="neutral" icon>
          <span class="btn-inner--icon">
            <img
              src="../../img/icons/common/google.svg"
              alt="Image" />
          </span>
          <span class="btn-inner--text">Google</span>
        </BaseButton>
      </div>
    </div>

    <div>
      <div class="text-center text-muted mb-4">
        <small>Or sign in with credentials</small>
      </div>
      <form action="" role="form">
        <BaseInput
          alternative
          model="email"
          className="mb-3"
          placeholder="Email"
          prependIcon="ni ni-email-83" />
        <BaseInput
          alternative
          model="password"
          placeholder="Password"
          prependIcon="ni ni-lock-circle-open" />
        <BaseCheckbox model="remember">Remember me</BaseCheckbox>
        <div class="text-center">
          <BaseButton type="primary" className="my-4">
            Sign In
          </BaseButton>
        </div>
      </form>
    </div>
  </Card>
  <div slot="footer" class="w-100 d-flex justify-content-end">
    <BaseButton type="white">Cancel</BaseButton>
    <BaseButton
      type="primary"
      className="text-white"
      on:click={() => closeModalType('form')}>
      Ok
    </BaseButton>
  </div>
</Modal>