Dialog
Generic Dialog
We use modals and dialogs for a variety of different purposes throughout the app including forms and verification prompts.
Example
<form action="" class="overlay" id="overlay_">
<div class="it_card">
<div class="it_top">
<h4>Are you sure ?</h4>
</div>
<div class="it_content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perspiciatis nesciunt ipsam dolore optio velit mollitia obcaecati
earum architecto. Magnam, atque. Quos tempora sit accusamus fugit
laborum error cumque, aut eos?
</p>
<div class="bbtn">
<button class="important-btn" type="submit">Accept</button>
<div onclick="remove_class()">Cancel</div>
</div>
</div>
</div>
</form>
Note
Modals in the app are defined using Dijit's Dialog plugin. The modal_id is used to bind the button onclick events to show/hide the modal.
The primary action in the modal and dialog appears before the secondary action.
Feature Dialog
Example
<form action="" class="overlay" id="overlay_">
<div class="it_card">
<div class="it_top">
<h4>Are you sure ?</h4>
</div>
<div class="it_content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Perspiciatis nesciunt ipsam dolore optio velit mollitia obcaecati
earum architecto. Magnam, atque. Quos tempora sit accusamus fugit
laborum error cumque, aut eos?
</p>
<div class="bbtn">
<button class="important-btn" type="submit">Accept</button>
<div onclick="remove_class()">Cancel</div>
</div>
</div>
</div>
</form>
Note
Use the feature-dialog class to show a dialog with a simpler look and feel.
This type of dialog should be used sparingly and not shown more than once. They should be easily dismissible as they don't feature a close icon.