Page 1 of 1

magnificpopup - Adding a custom close icon

Posted: Sun Mar 21, 2021 5:31 pm
by drooper
Hello everybody.

I'm using magnificpopup to display a contact form, which works as expected.

But to personalise the popup, I'm trying to add my own custom close functionality using a material icon on the form.
In the icon's properties, I added an "onclick" event to run the following javascript (as described in the magnificpopup documentation):

$.magnificPopup.close();

However, when the icon is clicked, nothing happens and the following error is generated:

Uncaught ReferenceError: $ is not defined at HTMLAnchorElement.onclick

My javascript/jquery skills are pretty basic. So to stop me from pulling out what little hair I have left, help from anybody who has managed to achieve this (or is willing to achieve this) would be much appreciated.

Cheers.

Re: magnificpopup - Adding a custom close icon

Posted: Sun Mar 21, 2021 5:56 pm
by Pablo
I'm sorry, I cannot help you to cusomize the code.

Re: magnificpopup - Adding a custom close icon

Posted: Sun Mar 21, 2021 6:17 pm
by BaconFries
Forum member rogerl posted his solution on GitHub see the following url Note for information only
https://github.com/dimsemenov/Magnific- ... ssues/1041
There is also an extension by forum member jordan
viewtopic.php?f=42&t=72671

Re: magnificpopup - Adding a custom close icon

Posted: Mon Mar 22, 2021 3:20 pm
by drooper
Ok Pablo, thanks anyhow.

Thank you for that BF - I'll take a look.

If I manage to solve it, I'll post back.

Cheers.