Iframe'd modal with close

child.html

<div id="modal">I am a modal. Click outside me to "close the modal", which actually closes the iframe.</div>
<div id="mask" />

<style>
  body {
    background-color: rgba(255,255,255,0.5);
  }

  #modal {
    z-index: 1;
    position: absolute;
    left: 25%;
    top: 25%;
    width: 50%;
    height: 50%;
    background-color: white;
    box-shadow: 0 0 5px 5px rgba(0,0,0,.1);
    padding: 1em;
  }

  #mask {
    background-color: rgba(255,255,255,0.5);
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
</style>

<script>
  document.getElementById('mask').addEventListener('click', function () {
    window.parent.postMessage('closed', 'https://rawgit.com');
  });
</script>

parent.html

I am a parent page, with an iframe initially loaded over me.

<iframe id='frame' src="child.html"></iframe>

<style>
  html {
    background-color: steelblue;
  }
  iframe {
    border: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
</style>

<script>
  window.addEventListener('message', function (e) {
    if (e.data === 'closed') {
      document.getElementById('frame').remove()
    };
  });
</script>

You can preview the functionality here:

https://rawgit.com/ismyrnow/cca6bc3ac42a338a066fd601b5a7d425/raw/9fa5b49f6626a05b496c74fe221a3961b2c1e9c3/parent.html