title: Opening an external website in a modal popup
body: <p>I know that <code>&lt;a href="http://www.example.com" target="_blank"&gt;Click here&lt;/a&gt;</code> opens the link <em>in a new tab</em> (default behaviour in Chrome and Firefox) and that</p>
  
  <pre><code>&lt;a href="http://www.example.com" onclick="window.open('http://www.example.com', 
          'newwindow', 'width=700,height=500'); return false;"&gt;Click here&lt;/a&gt;
  </code></pre>
  
  <p>opens it <a href="https://stackoverflow.com/a/49035631/1422096"><em>in a new window</em></a>.</p>
  
  <p>But <strong>how to open an external page in a modal popup (centered on screen, rest of the original page "darkened")?</strong></p>
  
  <p>Is there a nice way to do it?</p>
  
  <p>I tried the following code, but it doesn't seem to be working (click: popup opens, reclick, it closes, reclick on link: it doesn't open anymore. Also the iframe doesn't load).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById("a").onclick = function(e) {
    e.preventDefault();
    document.getElementById("popup").style.display = "block";
    document.getElementById('iframe').src = "http://example.com";
    document.getElementById('page').className = "darken";
    setTimeout(function() { 
      document.getElementById('page').onclick = function() {
        document.getElementById("popup").style.display = "none";
        document.getElementById('page').className = "";
      }
    }, 100);
    return false;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#popup { 
    display: none; 
    border: 1px black solid;
    width: 400px; height: 200px; 
    top:20px; left:20px;
    background-color: white;
    z-index: 10;
    padding: 2em;
    position: fixed;
  }
  
  .darken { background: rgba(0, 0, 0, 0.7); }
  
  #iframe { border: 0; }
  
  html, body, #page { height: 100%; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="page"&gt;
    &lt;a href="" id="a"&gt;Click me&lt;/a&gt;&lt;br&gt;
    Hello&lt;br&gt;
    Hello&lt;br&gt;
  
    &lt;div id="popup"&gt; 
    External website:
    &lt;iframe id="iframe"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>