@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "ui-modals", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Modals", "crumbs": "
  • Dashboard
  • UI
  • Modals
    • " })

    Use a modal for dialog boxes, confirmation messages, or other content that can be called up. In order for the modal to work you have to add the Modal ID to the link of the trigger. To add a close button, just add the class .modal-close to your button.

    Basic

    Modal 
    <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>

<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>Text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Disagree</a>
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
  </div>
</div>

    With Fixed Footer

    Modal 
    <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal2">Modal</a>

<!-- Modal Structure -->
<div id="modal2" class="modal modal-fixed-footer">
  <div class="modal-content flow-text">
    <h4>Modal Header</h4>
    <p>Text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat ">Disagree</a>
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>
  </div>
</div>

    Bottom Sheet

    Modal 
    <!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal3" data-dismissible="true">Modal</a>

<!-- Modal Structure -->
<div id="modal3" class="modal bottom-sheet">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>Text</p>
  </div>
</div>

    Options

    You can customize the behavior of each modal using these options. For example, you can change background opacity or/and show effect speed. To do this, just place in your trigger tag some options.

    <!-- Modal Trigger -->
<a class="btn modal-trigger" href="#modal1" data-dismissible="true" data-opacity="0.6" data-induration="400" data-outduration="300">Modal</a>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })