<!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>