718 lines
22 KiB
HTML
718 lines
22 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
|
||
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
||
|
|
<title>Material Design for Bootstrap</title>
|
||
|
|
<!-- MDB icon -->
|
||
|
|
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
|
||
|
|
<!-- Font Awesome -->
|
||
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
|
||
|
|
<!-- Google Fonts Roboto -->
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
||
|
|
/>
|
||
|
|
<!-- MDB -->
|
||
|
|
<link rel="stylesheet" href="../../css/mdb.min.css" />
|
||
|
|
<!-- PRISM -->
|
||
|
|
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
|
||
|
|
<!-- Custom styles -->
|
||
|
|
<style></style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="container" style="margin-top: 3rem; margin-bottom: 3rem;">
|
||
|
|
<h2>Basic</h2>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal"
|
||
|
|
>
|
||
|
|
Launch demo modal
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade"
|
||
|
|
id="exampleModal"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModalLabel"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#staticBackdrop"
|
||
|
|
>
|
||
|
|
Launch static backdrop modal
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade"
|
||
|
|
id="staticBackdrop"
|
||
|
|
data-mdb-backdrop="static"
|
||
|
|
data-mdb-keyboard="false"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="staticBackdropLabel"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Understood</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModalScrollable"
|
||
|
|
>
|
||
|
|
Launch demo modal
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="modal fade"
|
||
|
|
id="exampleModalScrollable"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModalScrollableTitle"
|
||
|
|
aria-hidden="true"
|
||
|
|
style="display: none;"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog modal-dialog-scrollable" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
<p>
|
||
|
|
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||
|
|
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
|
||
|
|
vestibulum at eros.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||
|
|
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||
|
|
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
|
||
|
|
metus auctor fringilla.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||
|
|
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
|
||
|
|
vestibulum at eros.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||
|
|
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||
|
|
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
|
||
|
|
metus auctor fringilla.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||
|
|
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
|
||
|
|
vestibulum at eros.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||
|
|
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||
|
|
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
|
||
|
|
metus auctor fringilla.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||
|
|
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
|
||
|
|
vestibulum at eros.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||
|
|
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||
|
|
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
|
||
|
|
metus auctor fringilla.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||
|
|
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
|
||
|
|
vestibulum at eros.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||
|
|
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||
|
|
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
|
||
|
|
metus auctor fringilla.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac
|
||
|
|
facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac,
|
||
|
|
vestibulum at eros.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
|
||
|
|
lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
|
||
|
|
scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non
|
||
|
|
metus auctor fringilla.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<h2 class="mt-5 mb-4">Fade animation side</h2>
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal22"
|
||
|
|
>
|
||
|
|
Launch demo modal top
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade top"
|
||
|
|
id="exampleModal22"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal22"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal23"
|
||
|
|
>
|
||
|
|
Launch demo modal right
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade right"
|
||
|
|
id="exampleModal23"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal23"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal24"
|
||
|
|
>
|
||
|
|
Launch demo modal bottom
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade bottom"
|
||
|
|
id="exampleModal24"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal24"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal25"
|
||
|
|
>
|
||
|
|
Launch demo modal left
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade left"
|
||
|
|
id="exampleModal25"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal25"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<h2 class="mt-5 mb-4">Position</h2>
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal30"
|
||
|
|
>
|
||
|
|
Launch demo modal top right
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade right"
|
||
|
|
id="exampleModal30"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal30"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog modal-side modal-top-right" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal31"
|
||
|
|
>
|
||
|
|
Launch demo modal top left
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade left"
|
||
|
|
id="exampleModal31"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal31"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog modal-side modal-top-left" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal32"
|
||
|
|
>
|
||
|
|
Launch demo modal bottom right
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade right"
|
||
|
|
id="exampleModal32"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal32"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog modal-side modal-bottom-right" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal33"
|
||
|
|
>
|
||
|
|
Launch demo modal bottom left
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade left"
|
||
|
|
id="exampleModal33"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal33"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog modal-side modal-bottom-left" role="document">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn-close"
|
||
|
|
data-mdb-dismiss="modal"
|
||
|
|
aria-label="Close"
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div class="modal-body">
|
||
|
|
...
|
||
|
|
</div>
|
||
|
|
<div class="modal-footer">
|
||
|
|
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<h2 class="mt-5 mb-4">Frame</h2>
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal34"
|
||
|
|
>
|
||
|
|
Launch demo modal top
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade top"
|
||
|
|
id="exampleModal34"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal34"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog modal-frame modal-top" role="document">
|
||
|
|
<div class="modal-content rounded-0">
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="d-flex justify-content-center align-items-center my-3">
|
||
|
|
<p class="mb-0">
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo
|
||
|
|
provident fugiat reprehenderit nostrum quos.
|
||
|
|
</p>
|
||
|
|
<button type="button" class="btn btn-secondary ms-2" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary ms-2">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<!-- Button trigger modal -->
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-primary"
|
||
|
|
data-mdb-toggle="modal"
|
||
|
|
data-mdb-target="#exampleModal35"
|
||
|
|
>
|
||
|
|
Launch demo modal bottom
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<!-- Modal -->
|
||
|
|
<div
|
||
|
|
class="modal fade bottom"
|
||
|
|
id="exampleModal35"
|
||
|
|
tabindex="-1"
|
||
|
|
role="dialog"
|
||
|
|
aria-labelledby="exampleModal35"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<div class="modal-dialog modal-frame modal-bottom" role="document">
|
||
|
|
<div class="modal-content rounded-0">
|
||
|
|
<div class="modal-body">
|
||
|
|
<div class="d-flex justify-content-center align-items-center my-3">
|
||
|
|
<p class="mb-0">
|
||
|
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo
|
||
|
|
provident fugiat reprehenderit nostrum quos.
|
||
|
|
</p>
|
||
|
|
<button type="button" class="btn btn-secondary ms-2" data-mdb-dismiss="modal">
|
||
|
|
Close
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-primary ms-2">Save changes</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- MDB -->
|
||
|
|
<script type="text/javascript" src="../../js/mdb.min.js"></script>
|
||
|
|
<!-- PRISM -->
|
||
|
|
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
|
||
|
|
<!-- MDB SNIPPET -->
|
||
|
|
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
|
||
|
|
<!-- Custom scripts -->
|
||
|
|
<script type="text/javascript"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|