Fancybox message pop up

mythman
New Member
2 0 0

I set up facybox using their quick start suggestion.... https://fancyapps.com/fancybox/3/

 

It works fine to view images, but I want to use it to open a message once a link/button is clicked. Exactly like this... https://codepen.io/fancyapps/pen/qMewWv?editors=1010

 

I have the HTML code where I want it, now my question is where exactly to put the JS code? I tried to put it at the end of theme.js but when you click the button it still does nothing.

 

Thanks in advanced for the help!

 

0 Likes
faisalxe
New Member
3 0 0

If you are having HTML already then you will need to put the id="test" in your html tag and after this you will need to use <script> tag at the end of HTML and it will work fine if you have linked fancybox correctly.

 

<button id="test"> click me to popup </button>

 

 

<script>

$("#test").on('click', function() {

$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');

});

</script>

0 Likes
mythman
New Member
2 0 0

I gave that a shot but when you push the button nothing happens still.

 

Getting error...

Uncaught TypeError: Cannot read property 'open' of undefined

On this line >   $.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');

 

0 Likes