Alpha | Responsive Admin Dashboard Template

Modals

Introduction 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-closeto your button.

<!-- 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>A bunch of text</p>    </div>    <div class="modal-footer">        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>    </div></divv

Modals with Fixed Footer If you have content that is very long and you want the action buttons to be visible all the time, you can add the modal-fixed-footerclass to the modal.

<!-- Modal Trigger --><a class="modal-trigger waves-effect waves-light btn" href="#modal1">Modal</a><!-- Modal Structure --><div id="modal1" class="modal modal-fixed-footer">    <div class="modal-content">        <h4>Modal Header</h4>        <p>A bunch of text</p>    </div>    <div class="modal-footer">        <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat ">Agree</a>    </div></div>

Bottom Sheet Modals Bottom Sheet Modals are good for displaying actions to the user on the bottom of a screen. They still act the same as regular modals.

<!-- Modal Trigger --><a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a><!-- Modal Structure --><div id="modal1" class="modal bottom-sheet">    <div class="modal-content">        <h4>Modal Header</h4>        <p>A bunch of text</p>    </div>    <div class="modal-footer">        <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>    </div></div>