Quick search results

No results found
Search
Last active 2 days ago
News about
23 Blogs
Tom King (Works at )
Avaible for freelance work
F
on Facebook
View website
T
on Twitter
View website
G
Google+
View website

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sunt in culpa qui quis.

Yesterday, 4:56 PM

Sunt in culpa qui officia deserunt mollit anim id est laborum. officia deserunt mollit anim id est laborum officia deserunt mollit anim

27 January 2016
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-close to your button.

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>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-footer class to the modal.

Modal With Fixed Footer
<!-- 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 Bottom Sheet Style
<!-- 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>