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?

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. — MaGi
– MaGi, Commented Mar 20, 2014 at 12:53

urz0r · Accepted Answer · 2014-03-20 12:37:01Z

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

answered Mar 20, 2014 at 12:37

urz0r

4623 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MaGi Over a year ago

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 Over a year ago

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 Over a year ago

Well the worst you can do is declare clickable as a global var and set it that way. But encapsulation would be best

urz0r Over a year ago

that's why I suggested a parent object in order to prevent having a global var.

Community · Accepted Answer · 2017-05-23 12:11:10Z

0

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

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Mar 20, 2014 at 12:36

Aameer

1,3761 gold badge11 silver badges30 bronze badges

Collectives™ on Stack Overflow

Modal popup window with Javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related