templates/ui-modals.html.twig line 1

Open in your IDE?
  1. {{ include('partials/main.html.twig') }}
  3.     <head>
  4.         
  5.         {{ include('partials/title-meta.html.twig', {title: 'Modals'}) }}
  7.         {{ include('partials/head-css.html.twig') }}
  9.     </head>
  11.     {{ include('partials/body.html.twig') }}
  13.         <!-- Begin page -->
  14.         <div id="layout-wrapper">
  16.             {{ include('partials/menu.html.twig') }}
  18.             <!-- ============================================================== -->
  19.             <!-- Start right Content here -->
  20.             <!-- ============================================================== -->
  21.             <div class="main-content">
  23.                 <div class="page-content">
  24.                     <div class="container-fluid">
  26.                         {{ include('partials/page-title.html.twig', {pagetitle: 'Components', title: 'Modals'}) }}
  28.                         <div class="row">
  29.                             <div class="col-12">
  30.                                 <div class="card">
  31.                                     <div class="card-header">
  32.                                         <h4 class="card-title">Modals Examples</h4>
  33.                                         <p class="card-title-desc">Modals are streamlined, but flexible
  34.                                             dialog prompts powered by JavaScript. They support a number of use cases
  35.                                             from user notification to completely custom content and feature a
  36.                                             handful of helpful subcomponents, sizes, and more.</p>
  37.                                     </div><!-- end card header -->
  39.                                     <div class="card-body">
  40.                                         <div class="modal bs-example-modal" tabindex="-1" role="dialog">
  41.                                             <div class="modal-dialog" role="document">
  42.                                                 <div class="modal-content">
  43.                                                     <div class="modal-header">
  44.                                                         <h5 class="modal-title">Modal title</h5>
  45.                                                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  46.                                                     </div>
  47.                                                     <div class="modal-body">
  48.                                                         <p>One fine body&hellip;</p>
  49.                                                     </div>
  50.                                                     <div class="modal-footer">
  51.                                                         <button type="button" class="btn btn-primary">Save changes</button>
  52.                                                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  53.                                                     </div>
  54.                                                 </div><!-- /.modal-content -->
  55.                                             </div><!-- /.modal-dialog -->
  56.                                         </div><!-- /.modal -->
  57.                                     </div><!-- end card-body -->
  58.                                 </div><!-- end card -->
  59.                             </div><!-- end col -->
  60.                         </div><!-- end row -->
  62.                         <div class="row">
  63.                             <div class="col-lg-6">
  64.                                 <div class="card">
  65.                                     <div class="card-header">
  66.                                         <h4 class="card-title">Default Modal</h4>
  67.                                         <p class="card-title-desc">Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.</p>
  68.                                     </div><!-- end card header -->
  70.                                     <div class="card-body">
  71.                                         <div>
  72.                                             <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#myModal">Standard modal</button>
  74.                                             <!-- sample modal content -->
  75.                                             <div id="myModal" class="modal fade" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true" data-bs-scroll="true">
  76.                                                 <div class="modal-dialog">
  77.                                                     <div class="modal-content">
  78.                                                         <div class="modal-header">
  79.                                                             <h5 class="modal-title" id="myModalLabel">Default Modal Heading</h5>
  80.                                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  81.                                                         </div>
  82.                                                         <div class="modal-body">
  83.                                                             <h5>Overflowing text to show scroll behavior</h5>
  84.                                                             <p>Cras mattis consectetur purus sit amet fermentum.
  85.                                                                 Cras justo odio, dapibus ac facilisis in,
  86.                                                                 egestas eget quam. Morbi leo risus, porta ac
  87.                                                                 consectetur ac, vestibulum at eros.</p>
  88.                                                             <p>Praesent commodo cursus magna, vel scelerisque
  89.                                                                 nisl consectetur et. Vivamus sagittis lacus vel
  90.                                                                 augue laoreet rutrum faucibus dolor auctor.</p>
  91.                                                             <p>Aenean lacinia bibendum nulla sed consectetur.
  92.                                                                 Praesent commodo cursus magna, vel scelerisque
  93.                                                                 nisl consectetur et. Donec sed odio dui. Donec
  94.                                                                 ullamcorper nulla non metus auctor
  95.                                                                 fringilla.</p>
  96.                                                             <p>Cras mattis consectetur purus sit amet fermentum.
  97.                                                                 Cras justo odio, dapibus ac facilisis in,
  98.                                                                 egestas eget quam. Morbi leo risus, porta ac
  99.                                                                 consectetur ac, vestibulum at eros.</p>
  100.                                                             <p>Praesent commodo cursus magna, vel scelerisque
  101.                                                                 nisl consectetur et. Vivamus sagittis lacus vel
  102.                                                                 augue laoreet rutrum faucibus dolor auctor.</p>
  103.                                                             <p>Aenean lacinia bibendum nulla sed consectetur.
  104.                                                                 Praesent commodo cursus magna, vel scelerisque
  105.                                                                 nisl consectetur et. Donec sed odio dui. Donec
  106.                                                                 ullamcorper nulla non metus auctor
  107.                                                                 fringilla.</p>
  108.                                                             <p>Cras mattis consectetur purus sit amet fermentum.
  109.                                                                 Cras justo odio, dapibus ac facilisis in,
  110.                                                                 egestas eget quam. Morbi leo risus, porta ac
  111.                                                                 consectetur ac, vestibulum at eros.</p>
  112.                                                         </div>
  113.                                                         <div class="modal-footer">
  114.                                                             <button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
  115.                                                             <button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
  116.                                                         </div>
  117.                                                     </div><!-- /.modal-content -->
  118.                                                 </div><!-- /.modal-dialog -->
  119.                                             </div><!-- /.modal -->
  120.                                         </div> <!-- end preview-->
  122.                                     </div><!-- end card-body -->
  123.                                 </div><!-- end card -->
  124.                             </div><!-- end col -->
  126.                             <div class="col-lg-6">
  127.                                 <div class="card">
  128.                                     <div class="card-header">
  129.                                         <h4 class="card-title">Fullscreen Modal</h4>
  130.                                         <p class="card-title-desc">Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed a <code>.modal-fullscreen</code>.</p>
  131.                                     </div><!-- end card header -->
  133.                                     <div class="card-body">
  134.                                         <div>
  135.                                             <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Fullscreen modal</button>
  137.                                             <!-- sample modal content -->
  138.                                             <div id="exampleModalFullscreen" class="modal fade" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
  139.                                                 <div class="modal-dialog modal-fullscreen">
  140.                                                     <div class="modal-content">
  141.                                                         <div class="modal-header">
  142.                                                             <h5 class="modal-title" id="exampleModalFullscreenLabel">Fullscreen Modal</h5>
  143.                                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  144.                                                         </div>
  145.                                                         <div class="modal-body">
  146.                                                             <h5>Overflowing text to show scroll behavior</h5>
  147.                                                             <p>Cras mattis consectetur purus sit amet fermentum.
  148.                                                                 Cras justo odio, dapibus ac facilisis in,
  149.                                                                 egestas eget quam. Morbi leo risus, porta ac
  150.                                                                 consectetur ac, vestibulum at eros.</p>
  151.                                                             <p>Praesent commodo cursus magna, vel scelerisque
  152.                                                                 nisl consectetur et. Vivamus sagittis lacus vel
  153.                                                                 augue laoreet rutrum faucibus dolor auctor.</p>
  154.                                                             <p>Aenean lacinia bibendum nulla sed consectetur.
  155.                                                                 Praesent commodo cursus magna, vel scelerisque
  156.                                                                 nisl consectetur et. Donec sed odio dui. Donec
  157.                                                                 ullamcorper nulla non metus auctor
  158.                                                                 fringilla.</p>
  159.                                                             <p>Cras mattis consectetur purus sit amet fermentum.
  160.                                                                 Cras justo odio, dapibus ac facilisis in,
  161.                                                                 egestas eget quam. Morbi leo risus, porta ac
  162.                                                                 consectetur ac, vestibulum at eros.</p>
  163.                                                             <p>Praesent commodo cursus magna, vel scelerisque
  164.                                                                 nisl consectetur et. Vivamus sagittis lacus vel
  165.                                                                 augue laoreet rutrum faucibus dolor auctor.</p>
  166.                                                             <p>Aenean lacinia bibendum nulla sed consectetur.
  167.                                                                 Praesent commodo cursus magna, vel scelerisque
  168.                                                                 nisl consectetur et. Donec sed odio dui. Donec
  169.                                                                 ullamcorper nulla non metus auctor
  170.                                                                 fringilla.</p>
  171.                                                             <p>Cras mattis consectetur purus sit amet fermentum.
  172.                                                                 Cras justo odio, dapibus ac facilisis in,
  173.                                                                 egestas eget quam. Morbi leo risus, porta ac
  174.                                                                 consectetur ac, vestibulum at eros.</p>
  175.                                                         </div>
  176.                                                         <div class="modal-footer">
  177.                                                             <button type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
  178.                                                             <button type="button" class="btn btn-primary waves-effect waves-light">Save changes</button>
  179.                                                         </div>
  180.                                                     </div><!-- /.modal-content -->
  181.                                                 </div><!-- /.modal-dialog -->
  182.                                             </div><!-- /.modal -->
  183.                                         </div> <!-- end preview-->
  184.                                     </div><!-- end card-body -->
  185.                                 </div><!-- end card -->
  186.                             </div><!-- end col -->
  187.                         </div><!-- end row -->
  189.                         <div class="row">
  190.                             <div class="col-lg-6">
  191.                                 <div class="card">
  192.                                     <div class="card-header">
  193.                                         <h4 class="card-title">Optional Sizes</h4>
  194.                                         <p class="card-title-desc">Modals have three optional sizes, available via modifier classes to be placed on a <code>.modal-dialog</code>.</p>
  195.                                     </div><!-- end card header -->
  197.                                     <div class="card-body">
  198.                                         <div class="d-flex flex-wrap gap-3">
  199.                                             <div>
  200.                                                 <!-- Extra Large modal button -->
  201.                                                 <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target=".bs-example-modal-xl">Extra large modal</button>
  203.                                                 <!--  Extra Large modal example -->
  204.                                                 <div class="modal fade bs-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  205.                                                     <div class="modal-dialog modal-xl">
  206.                                                         <div class="modal-content">
  207.                                                             <div class="modal-header">
  208.                                                                 <h5 class="modal-title" id="myExtraLargeModalLabel">Extra large modal</h5>
  209.                                                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  210.                                                             </div>
  211.                                                             <div class="modal-body">
  212.                                                                 <p>Cras mattis consectetur purus sit amet fermentum.
  213.                                                                     Cras justo odio, dapibus ac facilisis in,
  214.                                                                     egestas eget quam. Morbi leo risus, porta ac
  215.                                                                     consectetur ac, vestibulum at eros.</p>
  216.                                                                 <p>Praesent commodo cursus magna, vel scelerisque
  217.                                                                     nisl consectetur et. Vivamus sagittis lacus vel
  218.                                                                     augue laoreet rutrum faucibus dolor auctor.</p>
  219.                                                                 <p class="mb-0">Aenean lacinia bibendum nulla sed consectetur.
  220.                                                                     Praesent commodo cursus magna, vel scelerisque
  221.                                                                     nisl consectetur et. Donec sed odio dui. Donec
  222.                                                                     ullamcorper nulla non metus auctor
  223.                                                                     fringilla.</p>
  224.                                                             </div>
  225.                                                         </div><!-- /.modal-content -->
  226.                                                     </div><!-- /.modal-dialog -->
  227.                                                 </div><!-- /.modal -->
  228.                                             </div>
  230.                                             <div>
  231.                                                 <!-- Large modal button -->
  232.                                                 <button type="button" class="btn btn-light waves-effect" data-bs-toggle="modal"
  233.                                                     data-bs-target=".bs-example-modal-lg">Large modal</button>
  234.                                             
  235.                                                 <!--  Large modal example -->
  236.                                                 <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
  237.                                                     aria-hidden="true">
  238.                                                     <div class="modal-dialog modal-lg">
  239.                                                         <div class="modal-content">
  240.                                                             <div class="modal-header">
  241.                                                                 <h5 class="modal-title" id="myLargeModalLabel">Large modal</h5>
  242.                                                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  243.                                                             </div>
  244.                                                             <div class="modal-body">
  245.                                                                 <p>Cras mattis consectetur purus sit amet fermentum.
  246.                                                                     Cras justo odio, dapibus ac facilisis in,
  247.                                                                     egestas eget quam. Morbi leo risus, porta ac
  248.                                                                     consectetur ac, vestibulum at eros.</p>
  249.                                                                 <p>Praesent commodo cursus magna, vel scelerisque
  250.                                                                     nisl consectetur et. Vivamus sagittis lacus vel
  251.                                                                     augue laoreet rutrum faucibus dolor auctor.</p>
  252.                                                                 <p class="mb-0">Aenean lacinia bibendum nulla sed consectetur.
  253.                                                                     Praesent commodo cursus magna, vel scelerisque
  254.                                                                     nisl consectetur et. Donec sed odio dui. Donec
  255.                                                                     ullamcorper nulla non metus auctor
  256.                                                                     fringilla.</p>
  257.                                                             </div>
  258.                                                         </div><!-- /.modal-content -->
  259.                                                     </div><!-- /.modal-dialog -->
  260.                                                 </div><!-- /.modal -->
  261.                                             </div>
  263.                                             <div>
  264.                                                 <!-- Small modal button -->
  265.                                                 <button type="button" class="btn btn-success waves-effect waves-light" data-bs-toggle="modal" data-bs-target=".bs-example-modal-sm">Small modal</button>
  267.                                                 <!--  Small modal example -->
  268.                                                 <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  269.                                                     <div class="modal-dialog modal-sm">
  270.                                                         <div class="modal-content">
  271.                                                             <div class="modal-header">
  272.                                                                 <h5 class="modal-title" id="mySmallModalLabel">Small modal</h5>
  273.                                                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  274.                                                             </div>
  275.                                                             <div class="modal-body">
  276.                                                                 <p>Cras mattis consectetur purus sit amet fermentum.
  277.                                                                     Cras justo odio, dapibus ac facilisis in,
  278.                                                                     egestas eget quam. Morbi leo risus, porta ac
  279.                                                                     consectetur ac, vestibulum at eros.</p>
  280.                                                                 <p>Praesent commodo cursus magna, vel scelerisque
  281.                                                                     nisl consectetur et. Vivamus sagittis lacus vel
  282.                                                                     augue laoreet rutrum faucibus dolor auctor.</p>
  283.                                                                 <p class="mb-0">Aenean lacinia bibendum nulla sed consectetur.
  284.                                                                     Praesent commodo cursus magna, vel scelerisque
  285.                                                                     nisl consectetur et. Donec sed odio dui. Donec
  286.                                                                     ullamcorper nulla non metus auctor
  287.                                                                     fringilla.</p>
  288.                                                             </div>
  289.                                                         </div><!-- /.modal-content -->
  290.                                                     </div><!-- /.modal-dialog -->
  291.                                                 </div><!-- /.modal -->
  292.                                             </div>
  293.                                         </div>
  294.                                     </div><!-- end card-body -->
  295.                                 </div><!-- end card -->
  296.                             </div><!-- end col -->
  298.                             <div class="col-lg-6">
  299.                                 <div class="card">
  300.                                     <div class="card-header">
  301.                                         <h5 class="card-title">Vertically Centered</h5>
  302.                                         <p class="card-title-desc">Add <code>.modal-dialog-centered</code> to <code>.modal-dialog</code> to vertically center the modal.</p>
  303.                                     </div><!-- end card header -->
  305.                                     <div class="card-body">
  306.                                         <div>
  307.                                             <!-- center modal -->
  308.                                             <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target=".bs-example-modal-center">Center modal</button>
  310.                                             <div class="modal fade bs-example-modal-center" tabindex="-1" role="dialog" aria-hidden="true">
  311.                                                 <div class="modal-dialog modal-dialog-centered">
  312.                                                     <div class="modal-content">
  313.                                                         <div class="modal-header">
  314.                                                             <h5 class="modal-title">Center modal</h5>
  315.                                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  316.                                                         </div>
  317.                                                         <div class="modal-body">
  318.                                                             <p>Cras mattis consectetur purus sit amet fermentum.
  319.                                                                 Cras justo odio, dapibus ac facilisis in,
  320.                                                                 egestas eget quam. Morbi leo risus, porta ac
  321.                                                                 consectetur ac, vestibulum at eros.</p>
  322.                                                             <p>Praesent commodo cursus magna, vel scelerisque
  323.                                                                 nisl consectetur et. Vivamus sagittis lacus vel
  324.                                                                 augue laoreet rutrum faucibus dolor auctor.</p>
  325.                                                             <p class="mb-0">Aenean lacinia bibendum nulla sed consectetur.
  326.                                                                 Praesent commodo cursus magna, vel scelerisque
  327.                                                                 nisl consectetur et. Donec sed odio dui. Donec
  328.                                                                 ullamcorper nulla non metus auctor
  329.                                                                 fringilla.
  330.                                                             </p>
  331.                                                         </div>
  332.                                                     </div><!-- /.modal-content -->
  333.                                                 </div><!-- /.modal-dialog -->
  334.                                             </div><!-- /.modal -->
  335.                                         </div>
  336.                                     </div><!-- end card body -->
  337.                                 </div><!-- end card -->
  338.                             </div><!-- end col -->
  339.                         </div><!-- end row -->
  341.                         <div class="row">
  342.                             <div class="col-lg-6">
  343.                                 <div class="card">
  344.                                     <div class="card-header">
  345.                                         <h5 class="card-title">Scrollable Modal</h5>
  346.                                         <p class="card-title-desc">Scrolling long content modal and 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>
  347.                                     </div><!-- end card header -->
  349.                                     <div class="card-body">
  350.                                         <div class="d-flex flex-wrap gap-3">
  351.                                     
  352.                                             <div>
  353.                                                 <!-- Scrollable modal button -->
  354.                                                 <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal"
  355.                                                     data-bs-target="#exampleModalLongScrollable">Long Scrollable Modal</button>
  356.                                     
  357.                                                 <!-- Scrollable modal -->
  358.                                                 <div class="modal fade" id="exampleModalLongScrollable" tabindex="-1" role="dialog"
  359.                                                     aria-labelledby="exampleModalLongScrollableTitle" aria-hidden="true">
  360.                                                     <div class="modal-dialog">
  361.                                                         <div class="modal-content">
  362.                                                             <div class="modal-header">
  363.                                                                 <h5 class="modal-title" id="exampleModalLongScrollableTitle">Long Scrollable Modal</h5>
  364.                                                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  365.                                                             </div>
  366.                                                             <div class="modal-body">
  367.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  368.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  369.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  370.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  371.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  372.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  373.                                                                     auctor fringilla.</p>
  374.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  375.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  376.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  377.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  378.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  379.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  380.                                                                     auctor fringilla.</p>
  381.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  382.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  383.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  384.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  385.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  386.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  387.                                                                     auctor fringilla.</p>
  388.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  389.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  390.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  391.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  392.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  393.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  394.                                                                     auctor fringilla.</p>
  395.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  396.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  397.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  398.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  399.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  400.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  401.                                                                     auctor fringilla.</p>
  402.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  403.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  404.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  405.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  406.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  407.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  408.                                                                     auctor fringilla.</p>
  409.                                                             </div>
  410.                                                             <div class="modal-footer">
  411.                                                                 <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
  412.                                                                 <button type="button" class="btn btn-primary">Save changes</button>
  413.                                                             </div>
  414.                                                         </div><!-- /.modal-content -->
  415.                                                     </div><!-- /.modal-dialog -->
  416.                                                 </div><!-- /.modal -->
  417.                                             </div>
  419.                                             <div>
  420.                                                 <!-- Scrollable modal button -->
  421.                                                 <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal"
  422.                                                     data-bs-target="#exampleModalScrollable">Scrollable Modal</button>
  423.                                     
  424.                                                 <!-- Scrollable modal -->
  425.                                                 <div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog"
  426.                                                     aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
  427.                                                     <div class="modal-dialog modal-dialog-scrollable">
  428.                                                         <div class="modal-content">
  429.                                                             <div class="modal-header">
  430.                                                                 <h5 class="modal-title" id="exampleModalScrollableTitle">Scrollable Modal</h5>
  431.                                                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  432.                                                             </div>
  433.                                                             <div class="modal-body">
  434.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  435.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  436.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  437.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  438.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  439.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  440.                                                                     auctor fringilla.</p>
  441.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  442.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  443.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  444.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  445.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  446.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  447.                                                                     auctor fringilla.</p>
  448.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  449.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  450.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  451.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  452.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  453.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  454.                                                                     auctor fringilla.</p>
  455.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  456.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  457.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  458.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  459.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  460.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  461.                                                                     auctor fringilla.</p>
  462.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  463.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  464.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  465.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  466.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  467.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  468.                                                                     auctor fringilla.</p>
  469.                                                                 <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
  470.                                                                     in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
  471.                                                                 <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
  472.                                                                     lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
  473.                                                                 <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
  474.                                                                     scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
  475.                                                                     auctor fringilla.</p>
  476.                                                             </div>
  477.                                                             <div class="modal-footer">
  478.                                                                 <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
  479.                                                                 <button type="button" class="btn btn-primary">Save changes</button>
  480.                                                             </div>
  481.                                                         </div><!-- /.modal-content -->
  482.                                                     </div><!-- /.modal-dialog -->
  483.                                                 </div><!-- /.modal -->
  484.                                             </div>
  485.                                         </div>
  486.                                     </div><!-- end card body -->
  487.                                 </div><!-- end card -->
  488.                             </div><!-- end col -->
  490.                             <div class="col-lg-6">
  491.                                 <div class="card">
  492.                                     <div class="card-header">
  493.                                         <h5 class="card-title">Static Backdrop</h5>
  494.                                         <p class="card-title-desc">When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.</p>
  495.                                     </div><!-- end card header -->
  497.                                     <div class="card-body">                                        
  498.                                         <div>
  499.                                             
  500.                                             <!-- Static Backdrop modal Button -->
  501.                                             <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  502.                                                 Static backdrop modal
  503.                                             </button>
  504.                                             
  505.                                             
  506.                                             <!-- Static Backdrop Modal -->
  507.                                             <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  508.                                                 <div class="modal-dialog modal-dialog-centered" role="document">
  509.                                                     <div class="modal-content">
  510.                                                         <div class="modal-header">
  511.                                                             <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
  512.                                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  513.                                                         </div>
  514.                                                         <div class="modal-body">
  515.                                                             <p>I will not close if you click outside me. Don't even try to press escape key.</p>
  516.                                                         </div>
  517.                                                         <div class="modal-footer">
  518.                                                             <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
  519.                                                             <button type="button" class="btn btn-primary">Understood</button>
  520.                                                         </div>
  521.                                                     </div>
  522.                                                 </div>
  523.                                             </div>
  524.                                         </div>
  525.                                     </div><!-- end card body -->
  526.                                 </div><!-- end card -->
  527.                             </div><!-- end col -->
  528.                         </div><!-- end row -->
  530.                         <div class="row">
  531.                             <div class="col-lg-6">
  532.                                 <div class="card">
  533.                                     <div class="card-header">
  534.                                         <h4 class="card-title">Varying Modal Content</h4>
  535.                                         <p class="card-title-desc">Use <code>event.relatedTarget</code> and HTML <code>data-bs-*</code> attributes</a> to vary the contents of the modal depending on which button was clicked.</p>
  536.                                     </div><!-- end card header -->
  538.                                     <div class="card-body">
  539.                                         <div class="d-flex flex-wrap gap-3">
  540.                                             <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
  541.                                                 data-bs-whatever="@mdo">Open modal for @mdo</button>
  542.                                             <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
  543.                                                 data-bs-whatever="@fat">Open modal for @fat</button>
  544.                                             <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"
  545.                                                 data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
  546.                                         
  547.                                             <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  548.                                                 <div class="modal-dialog">
  549.                                                     <div class="modal-content">
  550.                                                         <div class="modal-header">
  551.                                                             <h5 class="modal-title" id="exampleModalLabel">New message</h5>
  552.                                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  553.                                                         </div>
  554.                                                         <div class="modal-body">
  555.                                                             <form>
  556.                                                                 <div class="mb-3">
  557.                                                                     <label for="recipient-name" class="col-form-label">Recipient:</label>
  558.                                                                     <input type="text" class="form-control" id="recipient-name">
  559.                                                                 </div>
  560.                                                                 <div class="mb-3">
  561.                                                                     <label for="message-text" class="col-form-label">Message:</label>
  562.                                                                     <textarea class="form-control" id="message-text"></textarea>
  563.                                                                 </div>
  564.                                                             </form>
  565.                                                         </div>
  566.                                                         <div class="modal-footer">
  567.                                                             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
  568.                                                             <button type="button" class="btn btn-primary">Send message</button>
  569.                                                         </div>
  570.                                                     </div>
  571.                                                 </div>
  572.                                             </div>
  573.                                         </div><!-- end preview-->
  574.                                     </div><!-- end card body -->
  575.                                 </div><!-- end card -->
  576.                             </div><!-- end col -->
  577.                             
  578.                             <div class="col-lg-6">
  579.                                 <div class="card">
  580.                                     <div class="card-header">
  581.                                         <h4 class="card-title">Toggle between modals</h4>
  582.                                         <p class="card-title-desc">Toggle between multiple modals with some clever placement of the <code>data-bs-target</code> and <code>data-bs-toggle</code> attributes.</p>
  583.                                     </div><!-- end card header -->
  585.                                     <div class="card-body">
  586.                                         <div>
  587.                                             <button type="button" class="btn btn-primary waves-effect waves-light" data-bs-toggle="modal" data-bs-target="#firstmodal">Open First Modal</button>
  588.                                             <!-- First modal dialog -->
  589.                                             <div class="modal fade" id="firstmodal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  590.                                                 <div class="modal-dialog modal-dialog-centered">
  591.                                                     <div class="modal-content">
  592.                                                         <div class="modal-header">
  593.                                                             <h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
  594.                                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  595.                                                         </div>
  596.                                                         <div class="modal-body">
  597.                                                             <p>Show a second modal and hide this one with the button below.</p>
  598.                                                         </div>
  599.                                                         <div class="modal-footer">
  600.                                                             <!-- Toogle to second dialog -->
  601.                                                             <button class="btn btn-primary" data-bs-target="#secondmodal" data-bs-toggle="modal" data-bs-dismiss="modal">Open Second Modal</button>
  602.                                                         </div>
  603.                                                     </div>
  604.                                                 </div>
  605.                                             </div>
  606.                                             <!-- Second modal dialog -->
  607.                                             <div class="modal fade" id="secondmodal" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  608.                                                 <div class="modal-dialog modal-dialog-centered">
  609.                                                     <div class="modal-content">
  610.                                                         <div class="modal-header">
  611.                                                             <h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
  612.                                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  613.                                                         </div>
  614.                                                         <div class="modal-body">
  615.                                                             <p>Hide this modal and show the first with the button below.</p>
  616.                                                         </div>
  617.                                                         <div class="modal-footer">
  618.                                                             <!-- Toogle to first dialog, `data-bs-dismiss` attribute can be omitted - clicking on link will close dialog anyway -->
  619.                                                             <button class="btn btn-primary" data-bs-target="#firstmodal" data-bs-toggle="modal" data-bs-dismiss="modal">Back to First</button>
  620.                                                         </div>
  621.                                                     </div>
  622.                                                 </div>
  623.                                             </div>
  624.                                         </div><!-- end preview-->
  625.                                     </div><!-- end card body -->
  626.                                 </div><!-- end card -->
  627.                             </div><!-- end col -->
  628.                         </div><!-- end row -->
  629.                         
  630.                     </div> <!-- container-fluid -->
  631.                 </div>
  632.                 <!-- End Page-content -->
  633.                 
  634.                 {{ include('partials/footer.html.twig') }}
  636.             </div>
  637.             <!-- end main content-->
  639.         </div>
  640.         <!-- END layout-wrapper -->
  642.         {{ include('partials/right-sidebar.html.twig') }}
  644.         {{ include('partials/vendor-scripts.html.twig') }}
  646.         <script src="/js/pages/modal.init.js"></script>
  648.         <script>
  649.             var myModal = document.getElementById('myModal')
  650.             var myInput = document.getElementById('myInput')
  652.             myModal.addEventListener('shown.bs.modal', function () {
  653.             myInput.focus()
  654.             })
  655.         </script>
  657.         <script src="/js/app.js"></script>
  659.     </body>
  660. </html>