745 lines
40 KiB
PHP
Executable File
745 lines
40 KiB
PHP
Executable File
@extends('layouts.vertical', ['subtitle' => 'Modal'])
|
|
|
|
@section('content')
|
|
|
|
@include('layouts.partials/page-title', ['title' => 'Base UI', 'subtitle' => 'Modal'])
|
|
|
|
<!-- start modal -->
|
|
<div class="row">
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Default Modals
|
|
</h5>
|
|
<p class="card-subtitle">Toggle a working modal demo by clicking the button below. It
|
|
will slide down and fade in from the top of the page.</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
|
|
Launch demo modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Woo-hoo, you're reading this text in a modal!</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Static Backdrop
|
|
</h5>
|
|
<p class="card-subtitle">When backdrop is set to static, the modal will not close when
|
|
clicking outside of it. Click the button below to try it.</p>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
|
|
Launch static backdrop modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false"
|
|
tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>I will not close if you click outside of me. Don't even try to press
|
|
escape key.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Understood</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title ">
|
|
Scrolling Long Content
|
|
</h5>
|
|
<p class="card-subtitle">When modals become too long for the user’s viewport or
|
|
device, they scroll independent of the page itself. Try the demo below to see what
|
|
we mean.</p>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalLong">
|
|
Launch demo modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" style="min-height: 1500px">
|
|
<p>This is some placeholder content to show the scrolling behavior for
|
|
modals. Instead of repeating
|
|
the text the modal, we use an inline style set a minimum height,
|
|
thereby extending the length of
|
|
the overall modal and demonstrating the overflow scrolling. When
|
|
content becomes longer than the
|
|
height of the viewport, scrolling will move the modal as needed.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<p class="text-muted mt-3">You can also create a scrollable modal that allows scroll the
|
|
modal body by adding <code>.modal-dialog-scrollable</code> to
|
|
<code>.modal-dialog</code>.
|
|
</p>
|
|
|
|
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalScrollable">
|
|
Launch demo modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalScrollable" tabindex="-1"
|
|
aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is some placeholder content to show the scrolling behavior for
|
|
modals. We use repeated line
|
|
breaks to demonstrate how content can exceed minimum inner height,
|
|
thereby showing inner
|
|
scrolling. When content becomes longer than the predefined
|
|
max-height of modal, content will be
|
|
cropped and scrollable within the modal.</p>
|
|
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
|
|
<p>This content should appear at the bottom after you scroll.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Modal Position
|
|
</h5>
|
|
<p class="card-subtitle">Add <code>.modal-dialog-centered</code> to
|
|
<code>.modal-dialog</code> to vertically center the modal.
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalCenter">
|
|
Vertically centered modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalCenter" tabindex="-1"
|
|
aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is a vertically centered modal.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalCenteredScrollable">
|
|
Vertically centered scrollable modal
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1"
|
|
aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">
|
|
Modal title</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>This is some placeholder content to show a vertically centered
|
|
modal. We've added some extra
|
|
copy
|
|
here to show how vertically centering the modal works when
|
|
combined with scrollable modals.
|
|
We
|
|
also use some repeated line breaks to quickly extend the height
|
|
of the content, thereby
|
|
triggering the scrolling. When content becomes longer than the
|
|
predefined max-height of
|
|
modal,
|
|
content will be cropped and scrollable within the modal.</p>
|
|
<br><br><br><br><br><br><br><br><br><br>
|
|
<p>Just like that.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<p class="text-muted mt-3">
|
|
Specify the position for the modal. You can display modal at top, bottom of page
|
|
by specifying classes <code>modal-top</code> and <code>modal-bottom</code>
|
|
respectively.
|
|
</p>
|
|
|
|
|
|
<div class="d-flex flex-wrap gap-2">
|
|
<!-- Button trigger modal -->
|
|
<div class="hstack gap-2">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#topModal">Top Modal</button>
|
|
<button type="button" class="btn btn-success " data-bs-toggle="modal"
|
|
data-bs-target="#bottomModal">Bottom Modal</button>
|
|
</div>
|
|
|
|
<!-- top modal -->
|
|
<div id="topModal" class="modal fade" tabindex="-1" role="dialog"
|
|
aria-labelledby="topModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-top">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="topModalLabel">Modal Heading</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h6>Text in a modal</h6>
|
|
<p class="mb-0">Duis mollis, est non commodo luctus, nisi erat
|
|
porttitor ligula.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-light"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div> <!-- end modal content -->
|
|
</div> <!-- end modal dialog -->
|
|
</div> <!-- end modal -->
|
|
|
|
<!-- bottom modal -->
|
|
<div id="bottomModal" class="modal fade" tabindex="-1" role="dialog"
|
|
aria-labelledby="bottomModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-bottom">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="bottomModalLabel">Modal Heading</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h6>Text in a modal</h6>
|
|
<p class="mb-0">Duis mollis, est non commodo luctus, nisi erat
|
|
porttitor ligula.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-light"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
|
</div>
|
|
</div> <!-- end modal content -->
|
|
</div> <!-- end modal dialog -->
|
|
</div> <!-- end modal -->
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Toggle Between Modals
|
|
</h5>
|
|
<p class="card-subtitle"> Toggle between multiple modals with some clever placement of
|
|
the <code>data-bs-target</code> and
|
|
<code>data-bs-toggle</code> attributes. For example, you could toggle a password
|
|
reset modal from within an already
|
|
open sign in modal. <strong>Please note multiple modals cannot be open at the same
|
|
time</strong>—this method simply
|
|
toggles between two separate modals.
|
|
</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<!-- Button trigger modal -->
|
|
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open
|
|
first modal</a>
|
|
|
|
<!-- First Modal -->
|
|
<div class="modal fade" id="exampleModalToggle" aria-hidden="true"
|
|
aria-labelledby="exampleModalToggleLabel" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Show a second modal and hide this one with the button below.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2"
|
|
data-bs-toggle="modal">Open
|
|
second modal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Second Modal -->
|
|
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true"
|
|
aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Hide this modal and show the first with the button below.
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
<button class="btn btn-primary" data-bs-target="#exampleModalToggle"
|
|
data-bs-toggle="modal">Back to
|
|
first</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Optional Sizes
|
|
</h5>
|
|
<p class="card-subtitle">Modals have three optional sizes, available via modifier
|
|
classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain
|
|
breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="hstack gap-2">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalXl">Extra large modal</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalLg">Large modal</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalSm">Small modal</button>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalLg" tabindex="-1" aria-labelledby="exampleModalLgLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="exampleModalSm" tabindex="-1" aria-labelledby="exampleModalSmLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Fullscreen Modal
|
|
</h5>
|
|
<p class="card-subtitle">Modals have three optional sizes, available via modifier
|
|
classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain
|
|
breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
|
|
<div class="hstack flex-wrap gap-2">
|
|
<!-- Button trigger modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalFullscreen">Full screen</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalFullscreenSm">Full screen below sm</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalFullscreenMd">Full screen below md</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalFullscreenLg">Full screen below lg</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalFullscreenXl">Full screen below xl</button>
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
|
|
</div>
|
|
|
|
<!-- Modal -->
|
|
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1"
|
|
aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen
|
|
modal</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="exampleModalFullscreenSm" tabindex="-1"
|
|
aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-sm-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full
|
|
screen below sm</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="exampleModalFullscreenMd" tabindex="-1"
|
|
aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-md-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full
|
|
screen below md</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="exampleModalFullscreenLg" tabindex="-1"
|
|
aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-lg-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full
|
|
screen below lg</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="exampleModalFullscreenXl" tabindex="-1"
|
|
aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-xl-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full
|
|
screen below xl</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1"
|
|
aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-fullscreen-xxl-down">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full
|
|
screen below xxl</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
...
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary"
|
|
data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card -->
|
|
|
|
<div class="col-lg-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">
|
|
Modal Based Alerts
|
|
</h5>
|
|
<p class="card-subtitle">Modals have three optional sizes, available via modifier
|
|
classes to be placed on a <code>.modal-dialog</code>. These sizes kick in at certain
|
|
breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
<div class="hstack flex-wrap gap-2">
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
|
|
data-bs-target="#primaryAlertModal">Primary Alert</button>
|
|
<button type="button" class="btn btn-secondary" data-bs-toggle="modal"
|
|
data-bs-target="#secondaryAlertModal">Secondary Alert</button>
|
|
<button type="button" class="btn btn-success" data-bs-toggle="modal"
|
|
data-bs-target="#successAlertModal">Success Alert</button>
|
|
<button type="button" class="btn btn-info" data-bs-toggle="modal"
|
|
data-bs-target="#infoALertModal">Info Alert</button>
|
|
</div>
|
|
|
|
<!-- Primary Alert Modal -->
|
|
<div id="primaryAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content modal-filled bg-primary">
|
|
<div class="modal-body">
|
|
<div class="text-center">
|
|
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
|
<h4 class="mt-3 text-white">Well Done!</h4>
|
|
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
|
<button type="button" class="btn btn-light mt-3"
|
|
data-bs-dismiss="modal">Continue</button>
|
|
</div>
|
|
</div> <!-- end modal body -->
|
|
</div><!-- end modal content -->
|
|
</div><!-- end modal dialog -->
|
|
</div> <!-- end modal -->
|
|
|
|
<!-- Secondary Alert Modal -->
|
|
<div id="secondaryAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content modal-filled bg-secondary">
|
|
<div class="modal-body">
|
|
<div class="text-center">
|
|
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
|
<h4 class="mt-3 text-white">Well Done!</h4>
|
|
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
|
<button type="button" class="btn btn-light mt-3"
|
|
data-bs-dismiss="modal">Continue</button>
|
|
</div>
|
|
</div> <!-- end modal body -->
|
|
</div><!-- end modal content -->
|
|
</div><!-- end modal dialog -->
|
|
</div> <!-- end modal -->
|
|
|
|
<!-- Success Alert Modal -->
|
|
<div id="successAlertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content modal-filled bg-success">
|
|
<div class="modal-body">
|
|
<div class="text-center">
|
|
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
|
<h4 class="mt-3 text-white">Well Done!</h4>
|
|
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
|
<button type="button" class="btn btn-light mt-3"
|
|
data-bs-dismiss="modal">Continue</button>
|
|
</div>
|
|
</div> <!-- end modal body -->
|
|
</div><!-- end modal content -->
|
|
</div><!-- end modal dialog -->
|
|
</div> <!-- end modal -->
|
|
|
|
<!-- Info Alert Modal -->
|
|
<div id="infoALertModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content modal-filled bg-info">
|
|
<div class="modal-body">
|
|
<div class="text-center">
|
|
<i class="bx bx-check-double display-6 mt-0 text-white"></i>
|
|
<h4 class="mt-3 text-white">Well Done!</h4>
|
|
<p class="mt-3">Cras mattis consectetur purus sit amet fermentum.
|
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
|
|
<button type="button" class="btn btn-light mt-3"
|
|
data-bs-dismiss="modal">Continue</button>
|
|
</div>
|
|
</div> <!-- end modal body -->
|
|
</div><!-- end modal content -->
|
|
</div><!-- end modal dialog -->
|
|
</div> <!-- end modal -->
|
|
|
|
</div>
|
|
|
|
</div> <!-- end card body -->
|
|
</div>
|
|
</div> <!-- end row -->
|
|
@endsection |