Opening an external website in a modal popup

前端 未结 3 1120
小鲜肉
小鲜肉 2021-01-07 06:33

I know that Click here opens the link in a new tab (default behaviour in Chrome an

3条回答
  •  失恋的感觉
    2021-01-07 07:26

    Based on Sphinx's great answer, here is what I'll use to create a modal popup displaying an external website in a iframe with a dark background for the rest of the page when the popup is open:

    document.getElementById("link").onclick = function(e) {
      e.preventDefault();
      document.getElementById("popupdarkbg").style.display = "block";
      document.getElementById("popup").style.display = "block";
      document.getElementById('popupiframe').src = "http://example.com";
      document.getElementById('popupdarkbg').onclick = function() {
          document.getElementById("popup").style.display = "none";
          document.getElementById("popupdarkbg").style.display = "none";
      };
      return false;
    }
    
    window.onkeydown = function(e) {
        if (e.keyCode == 27) {
          document.getElementById("popup").style.display = "none";
          document.getElementById("popupdarkbg").style.display = "none";
          e.preventDefault();
          return;
        }
    }
    #popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
    #popup iframe { width: 100%; height: 100%; border: 0; }
    #popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
    
    
    
    

提交回复
热议问题