Dialogs
Generic Dialog
We use modals and dialogs for a variety of different purposes throughout the app including forms and verification prompts.
<div data-dojo-type="dijit/Dialog" data-dojo-id="genericModal" title="Are you sure?">
<div class="dijitDialogPaneContentArea">
<p>You're about to delete this campaign.
</p>
<div class="dijitDialogPaneActionBar">
<button class="button p0" data-dojo-type="dijit/form/Button" type="button" data-dojo-props="onClick:function(){genericModal.hide();}">Delete</button>
<a href="#" onclick="closeDialog(); return false;">Cancel</a>
</div>
</div>
</div>
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
x
<div data-dojo-type="dijit/Dialog" data-dojo-id="featureModal" class="feature-dialog">
<div class="dijitDialogPaneContentArea max-height-inherit alignc !padding--lv0 selfclear">
<img src="https://cdn-images.mailchimp.com/product/campaigns/ab-testing.svg" class="padding--lv6">
<div class="margin--lv3">
<p class="full-width margin-bottom--lv0">We’ve updated the AB testing
<span class="hide-mobile">campaign</span> interface.
</p>
<p class="full-width">Now you can easily test your content.
</p>
</div>
</div>
<div class="dijitDialogPaneActionBar alignc">
<button class="button p1" data-action="dismissDialog" onclick="featureModal.hide(); return false;">Dismiss</button>
</div>
</div>
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.