JSFiddle - React, Tailwind, and code Playground

by Jowed

HTML

<head>
    <script src="https://static.matterport.com/showcase-sdk/2.0.1-0-g64e7e88/sdk.js"></script>
</head>
<body>
  <div class="container">
    <iframe
     id="showcase"
     src="https://my.matterport.com/show?m=iL4RdJqi2yK&qs=1&play=1&hr=0"
     frameborder="0"
     >
     </iframe>
  </div>
</body>

CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container{
  width: 100vw;
  height: 100vh;
}
#showcase{
  width: 100%;
  height: 100%;
}

#modal{
  position: absolute;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 50%;
  top: 25%;
  background-color: rgb(.8, .5, .5, .5);
}

#modal > button{
  width: fit-content;
  height: fit-content;
  margin-top: 10px;
}
#modal > p{
  margin-bottom: 10px;
  color: white;
}

JavaScript

const key = "6eb9607db19546aebe10dce90aa001fa" // jsfiddle key

document.addEventListener("DOMContentLoaded", initShowcaseSDK);

async function initShowcaseSDK(){
  const iframe = document.getElementById('showcase');
	const sdk = await MP_SDK.connect(iframe, key, "3.10");
  
  // prevent default behaviors for each Mattertag as it's added to Showcase
  sdk.Mattertag.data.subscribe({
  	onAdded: (index, item, collection) =>{
    
    	// Prevent the default opening behavior
    	sdk.Mattertag.preventAction(item.sid, {
        navigating: true,
        opening: true
      });
    }
  });
  
  sdk.on(sdk.Mattertag.Event.CLICK, makeModal); // makeModal is the custom event
}

function makeModal(sid){
	const overlay = document.createElement('div');
  overlay.setAttribute('id', 'modal');
  
  const content = document.createElement('p');
  content.innerText = `Content for tag associated with tag ID ${sid}`;
  
  const button = document.createElement('button');
  button.innerText = "Close Modal";
  button.addEventListener('click', () => {
  	overlay.remove();
  });
  
  overlay.append(content);
  overlay.append(button);
  document.querySelector('.container').appendChild(overlay);
  
}