Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UIFabric React as your front-end framework.
Overview
Dialogs are temporary, modal UI overlay that generally provide contextual app information or require user confirmation/input. In most cases, Dialogs block interactions with the web page or application until being explicitly dismissed, and often request action from the user. They are primarily used for lightweight creation or edit tasks, and simple management tasks.
Also available in Fabric React
Using this Component
-
Confirm that you have references to Fabric's CSS and JavaScript on your page:
<link rel="stylesheet" href="fabric.min.css" /><link rel="stylesheet" href="fabric.components.min.css" /><script src="fabric.min.js"></script> -
Copy the HTML from one of the samples below into your page. For example:
<div class="docs-DialogExample-default"> <div class="ms-Dialog"> <div class="ms-Dialog-title">All emails together</div> <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-CheckBox"> <input tabindex="-1" type="checkbox" class="ms-CheckBox-input"> <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa"> <span class="ms-Label">Option1</span> </label> </div> <div class="ms-CheckBox"> <input tabindex="-1" type="checkbox" class="ms-CheckBox-input"> <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa"> <span class="ms-Label">Option2</span> </label> </div> </div> <div class="ms-Dialog-actions"> <button class="ms-Button ms-Dialog-action ms-Button--primary"> <span class="ms-Button-label">Save</span> </button> <button class="ms-Button ms-Dialog-action"> <span class="ms-Button-label">Cancel</span> </button> </div> </div> <button class="ms-Button docs-DialogExample-button">Open Dialog</button> <label class="docs-DialogExample-label"></label></div> -
Add the following
<script>tag to your page, below the references to Fabric's JS, to instantiate all Dialog components on the page:See Also7 things you need to know about fabric inspection - EurofinsFabric-Testversion - Microsoft FabricInstall Runtime Fabric on Self-Managed KubernetesFabric for Minecraft 1.19<script type="text/javascript"> var DialogElements = document.querySelectorAll(".ms-Dialog"); var DialogComponents = []; for (var i = 0; i < DialogElements.length; i++) { (function() { DialogComponents[i] = new fabric['Dialog'](DialogElements[i]); }()); }</script> -
Replace the sample HTML content with your content.
Variants
Default Dialog
<div class="docs-DialogExample-default"> <div class="ms-Dialog"> <div class="ms-Dialog-title">All emails together</div> <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-CheckBox"> <input tabindex="-1" type="checkbox" class="ms-CheckBox-input"> <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa"> <span class="ms-Label">Option1</span> </label> </div> <div class="ms-CheckBox"> <input tabindex="-1" type="checkbox" class="ms-CheckBox-input"> <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa"> <span class="ms-Label">Option2</span> </label> </div> </div> <div class="ms-Dialog-actions"> <button class="ms-Button ms-Dialog-action ms-Button--primary"> <span class="ms-Button-label">Save</span> </button> <button class="ms-Button ms-Dialog-action"> <span class="ms-Button-label">Cancel</span> </button> </div> </div> <button class="ms-Button docs-DialogExample-button">Open Dialog</button> <label class="docs-DialogExample-label"></label></div><script type="text/javascript"> (function() { var example = document.querySelector(".docs-DialogExample-default"); var button = example.querySelector(".docs-DialogExample-button"); var dialog = example.querySelector(".ms-Dialog"); var label = example.querySelector(".docs-DialogExample-label") var checkBoxElements = example.querySelectorAll(".ms-CheckBox"); var actionButtonElements = example.querySelectorAll(".ms-Dialog-action"); var checkBoxComponents = []; var actionButtonComponents = []; // Wire up the dialog var dialogComponent = new fabric['Dialog'](dialog); // Wire up the checkBoxes for (var i = 0; i < checkBoxElements.length; i++) { checkBoxComponents[i] = new fabric['CheckBox'](checkBoxElements[i]); } // Wire up the buttons for (var i = 0; i < actionButtonElements.length; i++) { actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler); } // When clicking the button, open the dialog button.onclick = function() { openDialog(dialog); }; function actionHandler(event) { var labelText = ""; var counter = 0; for (var i = 0; i < checkBoxComponents.length; i++) { if (checkBoxComponents[i].getValue()) { counter++; } } labelText += counter + " option(s) selected. " + this.innerText.trim() + " clicked"; label.innerText = labelText; } function openDialog(dialog) { // Open the dialog dialogComponent.open(); } }());</script>All emails together
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
Multiline Dialog
<div class="docs-DialogExample-multiline"> <div class="ms-Dialog ms-Dialog--multiline"> <div class="ms-Dialog-title">All emails together</div> <div class="ms-Dialog-content"> <button class="ms-Button ms-Dialog-action ms-Button--compound"> <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--Add"></i></span> <span class="ms-Button-label">Create Account</span> <span class="ms-Button-description">Description of this action this button takes</span> </button> <button class="ms-Button ms-Dialog-action ms-Button--compound"> <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--Add"></i></span> <span class="ms-Button-label">Sign in</span> <span class="ms-Button-description">Description of this action this button takes</span> </button> <button class="ms-Button ms-Dialog-action ms-Button--compound"> <span class="ms-Button-icon"><i class="ms-Icon ms-Icon--Add"></i></span> <span class="ms-Button-label">Settings</span> <span class="ms-Button-description">Description of this action this button takes</span> </button> </div> </div> <button class="ms-Button docs-DialogExample-button">Open Dialog</button> <label class="docs-DialogExample-label"></label></div>See Also
Installing Fabric [Fabric Wiki]<script type="text/javascript"> (function() { var example = document.querySelector(".docs-DialogExample-multiline"); var button = example.querySelector(".docs-DialogExample-button"); var dialog = example.querySelector(".ms-Dialog"); var label = example.querySelector(".docs-DialogExample-label") var actionButtonElements = example.querySelectorAll(".ms-Dialog-action"); var actionButtonComponents = []; // Wire up the dialog var dialogComponent = new fabric['Dialog'](dialog); // Wire up the buttons for (var i = 0; i < actionButtonElements.length; i++) { actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler); } // When clicking the button, open the dialog button.onclick = function() { openDialog(dialog); }; function actionHandler(event) { label.innerText = this.querySelector(".ms-Button-label").innerText.trim() + " clicked"; } function openDialog(dialog) { // Open the dialog dialogComponent.open(); } }());</script>All emails together
Large Header Dialog
<div class="docs-DialogExample-lgHeader"> <div class="ms-Dialog ms-Dialog--lgHeader"> <div class="ms-Dialog-title">All emails together</div> <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> <div class="ms-Dialog-actions"> <button class="ms-Button ms-Dialog-action ms-Button--primary"> <span class="ms-Button-label">Save</span> </button> <button class="ms-Button ms-Dialog-action"> <span class="ms-Button-label">Cancel</span> </button> </div> </div> <button class="ms-Button docs-DialogExample-button">Open Dialog</button> <label class="docs-DialogExample-label"></label></div><script type="text/javascript"> (function() { var example = document.querySelector(".docs-DialogExample-lgHeader"); var button = example.querySelector(".docs-DialogExample-button"); var dialog = example.querySelector(".ms-Dialog"); var label = example.querySelector(".docs-DialogExample-label") var actionButtonElements = example.querySelectorAll(".ms-Dialog-action"); var actionButtonComponents = []; // Wire up the dialog var dialogComponent = new fabric['Dialog'](dialog); // Wire up the buttons for (var i = 0; i < actionButtonElements.length; i++) { actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler); } // When clicking the button, open the dialog button.onclick = function() { openDialog(dialog); }; function actionHandler(event) { label.innerText = this.innerText.trim() + " clicked"; } function openDialog(dialog) { // Open the dialog dialogComponent.open(); } }());</script>All emails together
Your Inbox has changed. No longer does it include favorites, it is a singular destination for your emails.
Blocking Dialog
<div class="docs-DialogExample-blocking"> <div class="ms-Dialog ms-Dialog--blocking"> <div class="ms-Dialog-title">Unsaved changes</div> <div class="ms-Dialog-content"> <p class="ms-Dialog-subText">Are you sure you want to discard these changes?.</p> <div class="ms-CheckBox"> <input tabindex="-1" type="checkbox" class="ms-CheckBox-input"> <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa"> <span class="ms-Label">Option1</span> </label> </div> <div class="ms-CheckBox"> <input tabindex="-1" type="checkbox" class="ms-CheckBox-input"> <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa"> <span class="ms-Label">Option2</span> </label> </div> </div> <div class="ms-Dialog-actions"> <button class="ms-Button ms-Dialog-action ms-Button--primary"> <span class="ms-Button-label">Save</span> </button> <button class="ms-Button ms-Dialog-action"> <span class="ms-Button-label">Delete</span> </button> </div> </div> <button class="ms-Button docs-DialogExample-button">Open Dialog</button> <label class="docs-DialogExample-label"></label></div><script type="text/javascript"> (function() { var example = document.querySelector(".docs-DialogExample-blocking"); var button = example.querySelector(".docs-DialogExample-button"); var dialog = example.querySelector(".ms-Dialog"); var label = example.querySelector(".docs-DialogExample-label") var checkBoxElements = example.querySelectorAll(".ms-CheckBox"); var actionButtonElements = example.querySelectorAll(".ms-Dialog-action"); var checkBoxComponents = []; var actionButtonComponents = []; // Wire up the dialog var dialogComponent = new fabric['Dialog'](dialog); // Wire up the checkBoxes for (var i = 0; i < checkBoxElements.length; i++) { checkBoxComponents[i] = new fabric['CheckBox'](checkBoxElements[i]); } // Wire up the buttons for (var i = 0; i < actionButtonElements.length; i++) { actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler); } // When clicking the button, open the dialog button.onclick = function() { dialogComponent.open(); }; function actionHandler(event) { var labelText = ""; var counter = 0; for (var i = 0; i < checkBoxComponents.length; i++) { if (checkBoxComponents[i].getValue()) { counter++; } } labelText += counter + " option(s) selected. " + this.innerText.trim() + " clicked"; label.innerText = labelText; } }());</script>Unsaved changes
Are you sure you want to discard these changes?.
Close Dialog
<div class="docs-DialogExample-close"> <div class="ms-Dialog ms-Dialog--close"> <button class="ms-Dialog-button ms-Dialog-buttonClose"> <i class="ms-Icon ms-Icon--Cancel"></i> </button> <div class="ms-Dialog-title">All emails together</div> <div class="ms-Dialog-content"> <div class="ms-CheckBox"> <input tabindex="-1" type="checkbox" class="ms-CheckBox-input"> <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa"> <span class="ms-Label">Option1</span> </label> </div> <div class="ms-CheckBox"> <input tabindex="-1" type="checkbox" class="ms-CheckBox-input"> <label role="checkbox" class="ms-CheckBox-field" tabindex="0" aria-checked="false" name="checkboxa"> <span class="ms-Label">Option2</span> </label> </div> </div> <div class="ms-Dialog-actions"> <button class="ms-Button ms-Dialog-action ms-Button--primary"> <span class="ms-Button-label">Save</span> </button> <button class="ms-Button ms-Dialog-action"> <span class="ms-Button-label">Cancel</span> </button> </div> </div> <button class="ms-Button docs-DialogExample-button">Open Dialog</button> <label class="docs-DialogExample-label"></label></div><script type="text/javascript"> (function() { var example = document.querySelector(".docs-DialogExample-close"); var button = example.querySelector(".docs-DialogExample-button"); var dialog = example.querySelector(".ms-Dialog"); var label = example.querySelector(".docs-DialogExample-label") var checkBoxElements = example.querySelectorAll(".ms-CheckBox"); var actionButtonElements = example.querySelectorAll(".ms-Dialog-action"); var checkBoxComponents = []; var actionButtonComponents = []; // Wire up the dialog var dialogComponent = new fabric['Dialog'](dialog); // Wire up the checkBoxes for (var i = 0; i < checkBoxElements.length; i++) { checkBoxComponents[i] = new fabric['CheckBox'](checkBoxElements[i]); } // Wire up the buttons for (var i = 0; i < actionButtonElements.length; i++) { actionButtonComponents[i] = new fabric['Button'](actionButtonElements[i], actionHandler); } // When clicking the button, open the dialog button.onclick = function() { openDialog(dialog); }; function actionHandler(event) { var labelText = ""; var counter = 0; for (var i = 0; i < checkBoxComponents.length; i++) { if (checkBoxComponents[i].getValue()) { counter++; } } labelText += counter + " option(s) selected. " + this.innerText.trim() + " clicked"; label.innerText = labelText; } function openDialog(dialog) { // Open the dialog dialogComponent.open(); } }());</script>All emails together
Methods
| Name | Parameters | Description |
|---|---|---|
open() | None | Opens the component |
close() | None | Closes the component |
