I am trying just to get a window to pop up.

If I test the code in codepen, it works OK (see code below).

If however I enter it into my application (existing jQuery app). All I get are 5 small rectangles, as well as the text and buttons.

The window does not open or close. I can see with the dev tools that the code is executed (ie the open and close commands on button or text click pushes in my code).

I am thinking there is some interaction with maybe existing elements in my application, but not sure where to look

HTML

<button type=”button” class=”ui-button ui-corner-all ui-widget” id=”On” onclick=”graphSensor()”>On</button>

<smart-window id=”modalGraphWindow” modal closed label=”Graph”>
<div id=”graphPane”>
<section>
<h3>Graph goes here</h3>
small graph
</section>
</div>
<button type=”button” class=”ui-button ui-corner-all ui-widget” id=”Off” onclick=”unGraphSensor()”>Off</button>
</smart-window>

<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”&gt;

<script src=”https://code.jquery.com/jquery-3.6.0.js&#8221; integrity=”sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=” crossorigin=”anonymous”></script>
<script src=”https://code.jquery.com/ui/1.13.2/jquery-ui.js”></script&gt;
<script type=”text/javascript” src=”https://www.htmlelements.com/demos/source/smart.elements.js”></script&gt;
<script type=”text/javascript” src=”https://www.htmlelements.com/demos/source/smart.chart.js”></script&gt;
<script type=”text/javascript” src=”https://www.htmlelements.com/demos/source/smart.window.js”></script&gt;

CSS

html, body { padding: 10px; }

.smart-window #article {
overflow: auto;
}

@media screen and (max-width: 700px) {
.smart-window {
width: 90% !important;
left: 5% !important;
top: 5px !important;
}
}

JS

function graphSensor() {
// pop up a window, and display the 24h graph by default – user can ask for the long term graph

modalGraphWindow.open();
}
function unGraphSensor() {
// pop up a window, and display the 24h graph by default – user can ask for the long term graph
modalGraphWindow.close();
}

window.onload = function () {
modalGraphWindow.open();
}