Opening an external website in a modal popup

Question

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

Answer 1

The root cause is page.onclick is registered after popup window is open at the first time, then the following 'open popup' will trigger a.onclick and page.onclick in a row, that caused the popup window is open then is closed directly.

The simple solution is add one parameter to control the state of the popup. if the popup is closed, do nothing in page.onclick.

To remove setTimeout, there are two solution:

1. added another parameter to control the state of the popup initialization.

2. Don't make

   is the parent of , so will not be triggered when clicked

   .

Below are two solutions:

I prefer the Solution2, it is better decoupling than Solution1, every component foucs on its own jobs.

Solution 1: added isInit as the indicator if the popup already finished initialization.

PS: In the comment, you mentioned close the popup only when click on

, to implement this in solution1, I think you have to bind the event =mouseout, mouseenter to judge where the mouse clicks.

document.getElementById("a").onclick = function(e) {
  e.preventDefault();
  var isInit = true; // indicates if the popup already been initialized.
  var isClosed = false; // indicates the state of the popup
  document.getElementById("popup").style.display = "block";
  document.getElementById('iframe').src = "http://example.com";
  document.getElementById('page').className = "darken";
  document.getElementById('page').onclick = function() {
    if(isInit){isInit=false;return;}
    if(isClosed){return;} //if the popup is closed, do nothing.
    document.getElementById("popup").style.display = "none";
    document.getElementById('page').className = "";
    isClosed=true;
  }
  return false;
}

#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%; }

  Click me

  Hello

  Hello


  
 
  External website:
  
  

Solution 2: make

and is cousin not parent relations.

document.getElementById("popup").showpopup = function() {
  document.getElementById("popup").style.display = "block";
  document.getElementById('iframe').src = "http://example.com";
  document.getElementById('page').className = "darken";
  document.getElementById("page").style.display = "block";
}

document.getElementById("a").onclick = function(e) {
  e.preventDefault();
  document.getElementById("popup").showpopup();
}

document.getElementById('page').onclick = function() {
  if(document.getElementById("popup").style.display == "block") {
    document.getElementById("popup").style.display = "none";
    document.getElementById("page").style.display = "none";
    document.getElementById('page').className = "";
  }
};

#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;
}

#page { 
  display: none; 
  width: 100%; height: 100%; 
  top:0px; left:0px;
  z-index: 9;
  padding: 2em;
  position: absolute;
}

.darken { background: rgba(0, 0, 0, 0.7); }

#iframe { border: 0; }

html, body, #page { height: 100%; }

Click me

  Hello

  Hello




 
  External website:
  

0 讨论(0)

查看其它3个回答

发布评论:

提交评论

---

•  加载中...