interest-signup-iframe-dialog.html

<style>
  #backdrop {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #modalContent {
    position: fixed;
    z-index: 200;
    background: white;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    width: 90%;
    height: 90%;
    max-width: 800px;
    max-height: 600px
  }
  #x {
    text-decoration: none;
    z-index: 1000;
    position: absolute;
    right: 0;
    top: 0;
    padding: 16px;
    font-size: 32px;
    line-height: 16px;
    color: black;
  }
  #modal {
    visibility: hidden;
  }
  iframe {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 0;
  }
</style>

<a id="link" href="#">
  Klicka här för att öppna iframe med intresseanmälan
</a>
<div id="modal">
  <div id="backdrop">
    <div id="modalContent">
	    <a id="x" href="#">&times;</a>
    </div>
  </div>
</div>

<script>
  var modal = document.querySelector('#modal')
  var modalContent = document.querySelector('#modalContent')
  var iframe = document.createElement('iframe');
  iframe.src = 'https://boka-objekt-test.herokuapp.com/projekt/1';

  // Visa modalen
  var show = function () {
    modalContent.appendChild(iframe);
    modal.style.visibility = 'visible'
  }

  // Dölj modalen  
  var hide = function(event){
    event.stopPropagation()
    modal.style.visibility = 'hidden'
    modalContent.removeChild(iframe);
  }

  // Klick på länken visar modalen
  document
    .querySelector('#link')
    .addEventListener('click', show);

  // Klick på backdrop döljer modalen
  document
    .querySelector('#backdrop')
    .addEventListener('click', hide);

  // Klick på krysset döljer modalen
  document
    .querySelector('#x')
    .addEventListener('click', hide);
</script>