<div class="docs-OverlayDarkExample">
  {{> OverlayElem props=OverlayModels.dark }}
  <button class="ms-Button docs-OverlayDarkExample-button">Show the dark overlay</button>
</div>

<script type="text/javascript">
  var OverlayExample = document.querySelector('.docs-OverlayDarkExample');
  var Overlay = new fabric['Overlay'](OverlayExample.querySelector('.ms-Overlay'));
  var OverlayButton = OverlayExample.querySelector('.docs-OverlayDarkExample-button');
  
  // When clicking the button, open the MessageBanner
  OverlayButton.onclick = function() {
    Overlay.show();
  };
</script>

<div class="docs-OverlayDarkExample">
  {{> OverlayElem props=OverlayModels.dark }}
  <button class="ms-Button docs-OverlayDarkExample-button">Show the dark overlay</button>
</div>

<script type="text/javascript">
  var OverlayDarkExample = document.querySelector('.docs-OverlayDarkExample');
  var OverlayDark = new fabric['Overlay'](OverlayDarkExample.querySelector('.ms-Overlay'));
  var OverlayDarkButton = OverlayDarkExample.querySelector('.docs-OverlayDarkExample-button');
  
  // When clicking the button, open the MessageBanner
  OverlayDarkButton.onclick = function() {
    OverlayDark.show();
  };
</script>

Rename variables that were clashing
Rename variables that were clashing
