Office UI Fabric JS

Microsoft no longer supports this content and will not be responding to bugs or issues. We recommend using the newer version Office UI Fabric React as your front-end framework.

Dialog

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.

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:

<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.

Option1

Option2

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>

<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?.

Option1

Option2

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

Option1

Option2

Methods

Name	Parameters	Description
`open()`	None	Opens the component
`close()`	None	Closes the component