Partially obscures the page to create a modal experience and focus the user's attention. Typically used with a Dialog or Panel.
-
Confirm that you have references to Fabric's CSS and JavaScript on your page:
<head> <link rel="stylesheet" href="fabric.min.css"> <link rel="stylesheet" href="fabric.components.min.css"> <script src="fabric.min.js"></script> </head>
-
Copy the HTML from one of the samples above into your page. For example:
<div class="ms-Overlay"></div>
-
Add the following
<script>
tag to your page, below the references to Fabric's JS, to instantiate an Overlay component on the page:<script type="text/javascript"> var OverlayElement = document.querySelector('.ms-Overlay'); var Overlay = new fabric['Overlay'](OverlayElement); </script>
-
Replace the sample HTML content (such as the content of
.ms-Button-label
) with your content.
This component has no dependencies.