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>