Closing ColorBox with <button onclick='parent.jQue...

Cash1 · ‎07-19-2017

I am attempting to use jQuery ColorBox and have an onclick button close it, as opposed to the close button. I know the calling jQuery with "$" conflicts with the Javascript Weebly uses, so I changed out all of them with "jQuery" and it works fine locally in my browser. But the button doesn't close the box when I add it to my Weebly theme. Any suggestions? Here is what I have at the moment, and it works but just not in Weebly. Any help would be much appreciated.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <script>
window.onload = function() {
function openColorBox(){
  jQuery.colorbox({closeButton:false, escKey:false, width:"80%", height:"80%", overlayClose: false, 
html:"<h1>are you 21 or older?</h1> </br> " + "No, I am under 21".link("http://www.google.com") 
+ "</br><button onclick='parent.jQuery.colorbox.close(); return false;'>Yes, I am 21 or older</button>" });

}

var scr = document.createElement('script');
scr.src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js";
document.getElementsByTagName('body')[0].appendChild(scr);

 setTimeout(openColorBox, 10);
};
    </script>

Adam7 · ‎07-19-2017

Can you post a link to the page you added this to, @Cash? It might help our members to see it in action.

Cash1 · ‎07-19-2017

It isn't live. But the above code I posted can just copy and paste into the SEO > Header section and replicate the issue. Here is the full HTML that works on it's own outside of Weebly.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>ColorBox</title>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
  </head>
  <body>
    <h1>Title</h1>
    <h2>This is some content </h2>
    <p></p>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <script>
window.onload = function() {
function openColorBox(){
  jQuery.colorbox({closeButton:false, escKey:false, width:"80%", height:"80%", overlayClose: false, html:"<h1>are you 21 or older?</h1> </br> " + "No, I am under 21".link("http://www.google.com") + "</br><button onclick='parent.jQuery.colorbox.close(); return false;'>Yes, I am 21 or older</button>" });

}

var scr = document.createElement('script');
scr.src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js";
document.getElementsByTagName('body')[0].appendChild(scr);

 setTimeout(openColorBox, 10);
};
    </script>
  </body>
</html>

BJ5 · ‎07-19-2017

It worked ok for me on a test site. Try removing this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Weebly includes its own jquery library and it might be causing a race condition.

Cash1 · ‎07-19-2017

I just tried removing that script. I also tried a few different themes. Still the same issue. Can I ask what theme you are having success with and I will try that?

BJ5 · ‎07-19-2017

I'm using BirdsEye 2, but I'm not sure which one offhand.

Adam7 · ‎07-19-2017

If it's the last site you published, @BJ, then it's this version of BirdsEye:

https://www.weebly.com/themes/theme/715256706361612609

Cash1 · ‎07-19-2017

I just tried it with no success... I tried it in multiple browsers too.

Cash1 · ‎07-20-2017

ah, making the site live worked.

Adam7 · ‎07-20-2017

Aha! Glad to hear you've got it working.

Closing ColorBox with <button onclick='parent.jQuery.colorbox.close();'</button> not working