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