Displays content that temporarily blocks interactions with the application. It is primarily used for confirmation tasks, light-weight creation or edit tasks, and simple management tasks.
Includes a content area and two buttons.
All emails together
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
Includes multiple large buttons, each with a title and description.
Create account
Provides a large, styled header followed by a content area and two buttons.
All emails together now
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
The overlay for this variant does not dismiss the Dialog.
Unsaved changes
Are you sure you want to discard these changes?
Includes a close button at the top right, as an additional way to dismiss the dialog.
All emails together
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
This component has only the default state.
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
<script src="jquery-2.2.1.min.js"></script>
<script src="jquery.fabric.min.js"></script>
</head>
Copy the HTML from one of the samples above into your page. For example:
<button class="ms-Button js-DialogAction--open" data-target=".ms-Dialog--sample">
<span class="ms-Button-icon"><i class="ms-Icon ms-Icon--plus"></i></span>
<span class="ms-Button-label">Open Dialog</span>
<span class="ms-Button-description">Opens the Sample Dialog</span>
</button>
<div class="ms-Dialog ms-Dialog--sample">
<div class="ms-Overlay ms-Overlay--dark js-DialogAction--close"></div>
<div class="ms-Dialog-main">
<button class="ms-Dialog-button ms-Dialog-button--close js-DialogAction--close">
<i class="ms-Icon ms-Icon--x"></i>
</button>
<div class="ms-Dialog-header">
<p class="ms-Dialog-title">All emails together</p>
</div>
<div class="ms-Dialog-inner">
<div class="ms-Dialog-content">
<p class="ms-Dialog-subText">Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.</p>
<div class="ms-ChoiceField">
<input id="demo-checkbox-unselected1" class="ms-ChoiceField-input" type="checkbox">
<label for="demo-checkbox-unselected1" class="ms-ChoiceField-field"><span class="ms-Label">Option1</span></label>
</div>
<div class="ms-ChoiceField">
<input id="demo-checkbox-unselected2" class="ms-ChoiceField-input" type="checkbox">
<label for="demo-checkbox-unselected2" class="ms-ChoiceField-field"><span class="ms-Label">Option2</span></label>
</div>
</div>
<div class="ms-Dialog-actions">
<div class="ms-Dialog-actionsRight">
<button class="ms-Dialog-action ms-Button ms-Button--primary">
<span class="ms-Button-label">Save</span>
</button>
<button class="ms-Dialog-action ms-Button">
<span class="ms-Button-label">Cancel</span>
</button>
</div>
</div>
</div>
</div>
</div>
<script>
tag to your page, below the references to jQuery and Fabric's JS, to instantiate all Dialog components on the page: <script>
$(document).ready(function() {
if ($.fn.Dialog) {
$('.ms-Dialog').Dialog();
}
});
</script>
.ms-Dialog-content
) with your content.This component has no dependencies on other components.
More details will be added here.