Having difficulty creating popup descriptions

[accordeoniste]

I wish to create popup descriptions for my website. I followed the example on W3Schools' "How to Create Popups" page at https://w3schools.com/howto/howto_js_popup.asp. The example included Javascript code. However, the popup didn't work on my site as it did in the example. A script error message appeared saying "unable to get property 'toggle' of undefined or null reference". I looked for a Javascript function in the page source code that would refer to the toggle script, but couldn't find one. I don't know Javascript so I need a little help supplying the requisite function. Can someone help? 

[Funce]

What's your code looking like?
It sounds like the document.getElementById("MATCH") isn't matching up with your <div id="MATCH">

[dsonesuk]

If want multiple popups, the original script is only for a single pop-up per page. For multiple, use below

https://www.w3schools.com/code/tryit.asp?filename=FWD99BV7TNYI

The toggle is mentioned in this code also,

elem.children[0].classList.toggle("show");

it toggle the class name 'show' so the css associated with this class takes effect

.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

This also triggers the animation fadeIn

@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}

 

Edited October 19, 2018 by dsonesuk

[anon723641]

Hi,

@dsonesuk the link you posted is not available anymore. Do you have the code still? I am in front of the same problem like the OP

 

Kind regards

[MikeF]

Hello,

I am also interested in knowing more about how to show multiple popups for each div. The example in 

https://www.w3schools.com/howto/howto_js_popup.asp 

is only for one popup and I do not know how to change the script to allow for more than one. I hope someone can help!

 

Thanks!