Jump to content
accordeoniste

Having difficulty creating popup descriptions

Recommended Posts

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? 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×