Modal popup window with Javascript

Question

I have a clickable image that when you click a modal popup appears. I want to make sure you can only click it once and while the popup is showing, the clickable image is unclickable. I've tried several methods but no solution works as I want it to.

Here is the code:

init: function () {
 var myButton = document.getElementById("kaffePic"); 
 var clickable = true;
 console.log(clickable);
 myButton.onclick = function(e) {
 e.preventDefault();
 console.log(clickable);
 if(clickable)
 {
 clickable = false;
 popup(myButton, clickable);
 }
 else
 {
 return false;
 }
 };
}

And here is a part of the popup window (removed some code that has nothing to do with the issue).

function popup(theButton, returnClick) {
 var myDiv = document.createElement("div");
 myDiv.className = "popupWindow";
 var newButton = document.createElement('a');
 var image = document.createElement('img'); 
 image.src = 'img/theclosebutton.png';
 image.className = "popupImage";
 newButton.appendChild(image);
 myDiv.appendChild(newButton);
 newButton.onclick = function () {
 document.body.removeChild(myDiv);
 returnClick = true;
 }; 
}

Right now I can click it once, and then never again.

Any suggestions?

• MaGi: The issue is that after I close the popup window I want to be able to open the same window again by clicking the image.

Answer 1

it's called only once because clickable is set to false after the first click. i suspect you are trying to set it to true in your popup-method by calling returnClick = true; but all that does is setting your argument-value, not the actual clickable-variable itself.

right now, clickable is a variable in the scope of init, so popup can't access it. you could, for example, make clickable a var in the scope of init's parent object. then in popup, you'd access clickable by parentObject.clickable.

//illustration of my example
parentObject {
 var clickable,
 function init()
}
function popup() {
 ...
 parentObject.clickable = true;
}

• MaGi: I understand why it doesn't work now, thank you. But I am a bit uncertain of how I implement the parentObject. Do I make an object and inside the object I start the init function?
• urz0r: yes. you would then call parentObject.init(). on another note: if popup() is logically connected to init(), you should consider putting popup inside that parent-object, too. that way you'd encapsulate connected behaviour into one object.
• Huangism: Well the worst you can do is declare clickable as a global var and set it that way. But encapsulation would be best
• urz0r: that's why I suggested a parent object in order to prevent having a global var.

Answer 2

Check .one() event handler attachment of jquery and this the .one() of jquery is used to Attach a handler to an event for the elements. The handler is executed at most once per element per event type. second one is link to an stack overflow questions about resetting the .one().Hope this helps