1

I have a Div that should open up a popup with its innerHTML content. However, the click only works once on the same Div. I can click Div 2 and the popup will open, but I want to be able to open Div 1 after Div 1 has been clicked and closed.

Also, if I click the link inside the popup and close the window, Div 1 and Div 2 do not open up the popup anymore.

How to make it so the popup opens again with the content after clicking the same Div, after the popup has closed?

Pure javascript preferred

Minimum example: https://jsfiddle.net/ta4802/9x2Lg3wn/

<div class="m1" onclick="basicPopup('',this);">Text text text text
 <p> <a href="http://stackoverflow.com">Link 1</a> </p>
</div>
A A
  • 21
  • 4
  • The problem would appear to be, when your popup closes, it doesn't notify the original window to set popupwindow to null. – Snowmonkey Nov 20 '18 at 18:40

2 Answers2

1

So using the code from your fiddle, I changed two things: first, I moved the var inside the function (doesn't need to be global), and second, I added a popupwindow.onUnload handler:

popupWindow.onUnload = function(){
  popupWindow = null;
}

Adding that, when the window closes, the variable is cleared. Which would affect your if(...) statement. :)

See it working here.

Snowmonkey
  • 3,716
  • 1
  • 16
  • 16
  • So the var was global because I specifically do not want the Div to be clickable if the content is the same. Disregarding that, this solves problem 1, but not problem 2, where if I click the link inside the popup, then click the Div again, the content does not refresh to the innerHTML. – A A Nov 20 '18 at 21:08
  • SO, in case two, if the content of the popup changes, you need to listen for the popstate event. I think. https://stackoverflow.com/questions/3522090/event-when-window-location-href-changes – Snowmonkey Nov 23 '18 at 21:34
  • Thanks for the answer. I did some digging on the popstate event on [Mozilla Devs](https://developer.mozilla.org/en-US/docs/Web/API/History_API#The_pushState()_method), and it looks like popstate pushState() method only works with same origin URLs, not external URLs (which is what I have), so I don't think this would work. – A A Nov 25 '18 at 04:04
0

You just have to remove or comment these lines from your code:

if (popupWindow && popupWindow.document.body.innerHTML == t1.innerHTML) {
  return false; //if equal do nothing
}

When you click the Div1 link for the first time the popupWindow variable gets set and its innerHTML its given by the Div1 innerHTML. If you click again the link in Div1 this condition meets and the function returns false.

ednincer
  • 931
  • 8
  • 15