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.

Overlay

Overview

Overlays are used to render a semi-transparent layer on top of existing UI. Overlays help focus the user on the content that sits above the added layer and are often used to help designate a modal or blocking experience. Overlays can be seen used in conjunction with Panels and Dialogs.

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="ms-OverlayExample">
  <div class="ms-Overlay"></div>
  <button class="ms-Button docs-OverlayExample-button">Show the overlay</button>
</div>

Add the following <script> tag to your page, below the references to Fabric's JS, to instantiate all Overlay components on the page:

<script type="text/javascript">
  var OverlayExamples = document.querySelectorAll(".ms-OverlayExample");
  for (var i = 0; i < OverlayExamples.length; i++) {
    (function() {
      var OverlayExampleButton = OverlayExamples[i].querySelector(".ms-Button");
      var OverlayComponent = OverlayExamples[i].querySelector(".ms-Overlay");
      var Overlay = new fabric['Overlay'](OverlayComponent);
      OverlayExampleButton.onclick = function() {
        Overlay.show();
      };
    }());
  }
</script>

Replace the sample HTML content with your content.

Variants

Default Overlay

<div class="ms-OverlayExample">
  <div class="ms-Overlay"></div>
  <button class="ms-Button docs-OverlayExample-button">Show the overlay</button>
</div>

<script type="text/javascript">
  var OverlayExamples = document.querySelectorAll(".ms-OverlayExample");
  for (var i = 0; i < OverlayExamples.length; i++) {
    (function() {
      var OverlayExampleButton = OverlayExamples[i].querySelector(".ms-Button");
      var OverlayComponent = OverlayExamples[i].querySelector(".ms-Overlay");
      var Overlay = new fabric['Overlay'](OverlayComponent);
      OverlayExampleButton.onclick = function() {
        Overlay.show();
      };
    }());
  }
</script>

Dark Overlay

<div class="ms-OverlayExample">
  <div class="ms-Overlay ms-Overlay--dark"></div>
  <button class="ms-Button docs-OverlayExample-button">Show the overlay</button>
</div>

<script type="text/javascript">
  var OverlayExamples = document.querySelectorAll(".ms-OverlayExample");
  for (var i = 0; i < OverlayExamples.length; i++) {
    (function() {
      var OverlayExampleButton = OverlayExamples[i].querySelector(".ms-Button");
      var OverlayComponent = OverlayExamples[i].querySelector(".ms-Overlay");
      var Overlay = new fabric['Overlay'](OverlayComponent);
      OverlayExampleButton.onclick = function() {
        Overlay.show();
      };
    }());
  }
</script>

Methods

Name	Parameters	Description
`remove()`	None	Removes the component from page
`show()`	None	Shows the component
`hide()`	None	Hides the component