When I paste the below code into a Content Editor WP on SP2016 or SPO it seems to be fine, looks nice and I get no js errors while running it. But on clicking the button, the panel displays for a short while - then disappears again. It never sticks and the page its hosted on seems to refresh.
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css">
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>
<div class="ms-PanelExample">
<button class="ms-Button">
<span class="ms-Button-label">Add site</span>
</button>
<div class="ms-Panel">
<button class="ms-Panel-closeButton ms-PanelAction-close">
<i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
</button>
<div class="ms-Panel-contentInner">
<p class="ms-Panel-headerText">Settings</p>
<div class="ms-Panel-content">
<div class="ms-TextField">
<label class="ms-Label">Title</label>
<input class="ms-TextField-field" type="text" value="" placeholder="">
</div>
<br>
<div class="ms-Toggle">
<span class="ms-Toggle-description">Open?</span>
<input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
<label for="demo-toggle-3" class="ms-Toggle-field is-selected" tabindex="0">
<span class="ms-Label ms-Label--off">No</span>
<span class="ms-Label ms-Label--on">Yes</span>
</label>
</div>
<button class="ms-Button">
<span class="ms-Button-label">Create site</span>
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var PanelExamples = document.getElementsByClassName("ms-PanelExample");
for (var i = 0; i < PanelExamples.length; i++) {
(function() {
var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
PanelExampleButton.addEventListener("click", function(i) {
new fabric['Panel'](PanelExamplePanel);
});
}());
}
</script>
<script type="text/javascript">
var ToggleElements = document.querySelectorAll(".ms-Toggle");
for (var i = 0; i < ToggleElements.length; i++) {
new fabric['Toggle'](ToggleElements[i]);
}
</script>
