Click Model and popup a bigger box

[roberticomold]

I have the model on the screen, but I want to be able to click that model, and then popup in the center-ish of the screen a bigger version that has all the fixins 'camera-controls' too. I took off 'camera-controls' in the following code and didn't know how to link. In my example below I put a-href '#' as just an example. Didn't know to add javascript, or maybe it needs a dreaded Iframe.

lbl_ab.Text = "<a href='#'><model-viewer src='" + snapshot.Replace("'", "\\'") + "' auto-rotate style='width: 100px; height: 100px' id='snapshot_" + k + "'></model-viewer></a>"; cell.Controls.Add(lbl_ab);
Please help.

The bigger box would need to look like this, or something like it:
<model-viewer src='" + snapshot.Replace("'", "\\'") + "' camera-controls auto-rotate style='width: 300px; height: 300px' id='snapshot_" + k + "'></model-viewer>

[roberticomold]

i solved this the old-fashioned way by using classes that go from offshore to onshore. offshore has display-none and the onshore class.

<div id="centerattraction" class="offshore"> <span id="close" onclick="closeCenterAttraction(); return false;" style="cursor: pointer;font-size:large;">X</span> <model-viewer src="" camera-controls touch-action="pan-y" auto-rotate style='width: 90%; height: 90%; color: gray' id="mdviewer"></model-viewer> </div>

`

   function closeCenterAttraction()
    {
        var centerattraction = document.getElementById("centerattraction");
        var mdviewer = document.getElementById("mdviewer");
        var background = document.getElementById("div_background2");
        centerattraction.className = "offshore";
        mdviewer.src = "";
        background.style.display = "none";
    }
    function openCenterAttraction(gltf_file) {
        var centerattraction = document.getElementById("centerattraction");
        var mdviewer = document.getElementById("mdviewer");
        var background = document.getElementById("div_background2");
        background.style.display = "block";
        centerattraction.className = "onshore";
        mdviewer.src = gltf_file;
    }

`
Than the onshore class has stuff in it like this (we are actually still working on how it will look on screen):

.onshore { position: absolute; width: 50%; height: 50%; z-index: 10; background: black; padding-top: 1px; padding-left: 7px; padding-bottom: 5px; padding-right: 5px; border: 10px solid white; color: white; -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1); -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1); box-shadow: 0px 0px 0px 10px rgba(0,0,0,1); top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); }