JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<button type="button">Show apartment chooer</button>

<div class="plyo" hidden>
  <iframe src="https://mjoskanten.plyo.space/" frameborder="0" allow="autoplay" allowfullscreen></iframe>
  <button class="close" type="button">Close</button>
</div>

CSS

.plyo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.plyo[hidden] {
  display: none;
}

.close {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

JavaScript

document.querySelectorAll('button').forEach((btn) => btn.addEventListener('click', () => {
  const plyo = document.querySelector('.plyo')
  if (plyo.hasAttribute('hidden')) {
    plyo.removeAttribute('hidden')
  } else {
    plyo.setAttribute('hidden', '')
  }
}))