مودال (Modal)
دیالوگ هایی را برای لایت باکس ها، اعلان های کاربر و غیره به سایت خود اضافه کنید.
پیش فرض
<!-- Modal markup -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-sm">Save changes</button>
</div>
</div>
</div>
</div>
// Modal markup
.modal(tabindex="-1", role="dialog")
.modal-dialog(role="document")
.modal-content
.modal-header
h5.modal-title
| Modal title
button(type="button", class="btn-close", data-bs-dismiss="modal", aria-label="Close")
.modal-body
p Modal body text goes here.
.modal-footer
button(type="button", class="btn btn-secondary btn-sm", data-bs-dismiss="modal")
| Close
button(type="button", class="btn btn-primary btn-sm")
| Save changes
تب و فرم
<!-- Modal with tabs and forms -->
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs mb-0" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#signin" data-bs-toggle="tab" role="tab" aria-selected="true">
<i class="fi-login fs-sm me-2 ms-n1"></i>
Sign in
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#signup" data-bs-toggle="tab" role="tab" aria-selected="false">
<i class="fi-user fs-sm me-2 ms-n1"></i>
Sign up
</a>
</li>
</ul>
<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body tab-content py-4">
<form class="tab-pane fade show active" autocomplete="off" id="signin">
<div class="mb-3">
<label class="form-label" for="email1">Email address</label>
<input class="form-control" type="email" id="email1" placeholder="johndoe@example.com">
</div>
<div class="mb-3">
<label class="form-label" for="pass1">Password</label>
<div class="password-toggle">
<input class="form-control" type="password" id="pass1">
<label class="password-toggle-btn">
<input class="password-toggle-check" type="checkbox">
<span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<div class="mb-3 d-flex flex-wrap justify-content-between">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="remember">
<label class="form-check-label" for="remember">Remember me</label>
</div>
<a class="fs-sm" href="#">Forgot password?</a>
</div>
<button class="btn btn-primary d-block w-100" type="submit">Sign in</button>
</form>
<form class="tab-pane fade" autocomplete="off" id="signup">
<div class="mb-3">
<label class="form-label" for="name">Full name</label>
<input class="form-control" type="text" id="name" placeholder="John Doe">
</div>
<div class="mb-3">
<label class="form-label" for="email2">Email address</label>
<input class="form-control" type="email" id="email2" placeholder="johndoe@example.com">
</div>
<div class="mb-3">
<label class="form-label" for="pass2">Password</label>
<div class="password-toggle">
<input class="form-control" type="password" id="pass2">
<label class="password-toggle-btn">
<input class="password-toggle-check" type="checkbox">
<span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="pass3">Confirm password</label>
<div class="password-toggle">
<input class="form-control" type="password" id="pass3">
<label class="password-toggle-btn">
<input class="password-toggle-check" type="checkbox">
<span class="password-toggle-indicator"></span>
</label>
</div>
</div>
<button class="btn btn-primary d-block w-100" type="submit">Sign up</button>
</form>
</div>
</div>
</div>
</div>
// Modal with tabs and forms
.modal(tabindex="-1", role="dialog")
.modal-dialog(role="document")
.modal-content
.modal-header
ul(role="tablist").nav.nav-tabs.mb-0
li.nav-item
a(href="#signin", data-bs-toggle="tab", role="tab", aria-selected="true").nav-link.active
i.fi-login.fs-sm.me-2.ms-n1
| Sign in
li.nav-item
a(href="#signup", data-bs-toggle="tab", role="tab", aria-selected="false").nav-link
i.fi-user.fs-sm.me-2.ms-n1
| Sign up
button(type="button", class="btn-close", data-bs-dismiss="modal", aria-label="Close")
.modal-body.tab-content.py-4
form(autocomplete="off")#signin.tab-pane.fade.show.active
.mb-3
label(for="email1").form-label Email address
input(type="email", id="email1", placeholder="johndoe@example.com").form-control
.mb-3
label(for="pass1").form-label Password
.password-toggle
input(type="password", id="pass1").form-control
label.password-toggle-btn
input(type="checkbox").password-toggle-check
span.password-toggle-indicator
.mb-3.d-flex.flex-wrap.justify-content-between
.form-check.mb-2
input(type="checkbox", id="remember").form-check-input
label(for="remember").form-check-label Remember me
a(href="#").fs-sm Forgot password?
button(type="submit").btn.btn-primary.d-block.w-100
| Sign in
form(autocomplete="off")#signup.tab-pane.fade
.mb-3
label(for="name").form-label Full name
input(type="text", id="name", placeholder="John Doe").form-control
.mb-3
label(for="email2").form-label Email address
input(type="email", id="email2", placeholder="johndoe@example.com").form-control
.mb-3
label(for="pass2").form-label Password
.password-toggle
input(type="password", id="pass2").form-control
label.password-toggle-btn
input(type="checkbox").password-toggle-check
span.password-toggle-indicator
.mb-3
label(for="pass3").form-label Confirm password
.password-toggle
input(type="password", id="pass3").form-control
label.password-toggle-btn
input(type="checkbox").password-toggle-check
span.password-toggle-indicator
button(type="submit").btn.btn-primary.d-block.w-100
| Sign up
پیش نمایش زنده
<!-- Make sure the actual modal markup is present on the page and has the right id -->
<!-- Launch small modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalSmall">
Small modal
</button>
<!-- Launch default modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalDefault">
Default modal
</button>
<!-- Launch large modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalLarge">
Large modal
</button>
<!-- Launch extra large modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalXL">
Extra large modal
</button>
<!-- Launch long modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalLong">
Long modal
</button>
<!-- Launch modal with srolling content -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalScroll">
Srolling content
</button>
<!-- Launch vertically centered modal -->
<button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalCentered">
Vertically centered modal
</button>
// Make sure the actual modal markup is present on the page and has the right id
// Launch small modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalSmall")
| Small modal
// Launch default modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalDefault")
| Default modal
// Launch large modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalLarge")
| Large modal
// Launch extra large modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalXL")
| Extra large modal
// Launch long modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalLong")
| Long modal
// Launch modal with srolling content
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalScroll")
| Srolling content
// Launch vertically centered modal
button(type="button", class="btn btn-outline-secondary", data-bs-toggle="modal", data-bs-target="#modalCentered")
| Vertically centered modal