Modal & Notification page header description goes here...
Admetro build in app notification comes with default (white) or inverse (black) styling.
<a href="#" class="btn btn-primary btn-sm" data-toggle="notification" data-title="Reminder" data-content="Meeting with Terry" data-icon="fa fa-clock text-white" data-icon-class="bg-gradient-indigo" data-btn="true" data-btn-text="Details" data-btn-attr="data-click='trigger-details'">Demo</a>
1. Default Notification | Demo | 4. Inverse Style Notification | Demo |
2. Notification with Image | Demo | 5. Without Icon | Demo |
3. Custom Button url | Demo | 6. Single Button | Demo |
Available Options | |||
---|---|---|---|
1 | data-title="Calendar" | 8 | data-content="Tom's Birthday" |
2 | data-icon="ti-alarm-clock" | 9 | data-icon-class="bg-grey" |
3 | data-img="assets/img/user.jpg" | 10 | data-img-class="bg-inverse" |
4 | data-btn="true" | 11 | data-btn-text="Details" |
5 | data-btn-url="http://www.google.com" | 12 | data-btn-url="data-click='trigger-button'" |
6 | data-close-btn="disabled" | 13 | data-close-text="Close" |
7 | data-autoclose="true" | 14 | data-autoclose-time="5000" |
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Default Modal
Normal modal component like modal header, body and footer. |
Demo |
Inverse Modal
Place a |
Demo |
Full Cover Modal
Place a |
Demo |
Inverse Full Cover Modal
Place an additional |
Demo |
Full Width Modal
Place a |
Demo |
Large Modal
Place a |
Demo |
Small Modal
Place a |
Demo |