Opening the URL of a <a> link in JQuery colorbox when it is clicked

Question

i need help with this JQuery code i have.. i'm still a newbie when it comes to JQuery but i have alot of codes here to test with.. you know just incase you need one so here's the code..

<script type="text/javascript">
//onload popup
$(function()
{
    $(window).bind('load', 
        function(e) 
        {
            $.colorbox({opacity:0.3, href:"ext/popup.php"}); 
        });
});

</script>

now this time i don't want to load the page then let the form popup.. i wan't something to click like a link.. any suggestions?

Answer 1

$(function()
{
    $('#linkid').click(function(e) 
        {
            e.preventDefault();
            $.colorbox({opacity:0.3, href: this.href}); 
        });
});

And create a link like this

<a href="ext/popup.php" id="linkid">click me</a>

---

Update

If you want to apply this logic to multiple links you should use a class instead of an id

<a href="ext/popup.php" class="colorbox">click me</a>

and for the jquery target them with

$('.colorbox').click(...)

---

Comment

A generic comment on your code, you do not need to use $(function(){..}) and $(window).bind('load' .
The first part binds an event on the DOM ready. and the second on the DOM load.
Since the load will always come after the ready event you can directly do

$(window).load(function(){...});

But the load should only be used when you need the sub-elements to have been completely loaded before running your code ( usually images ).
read: http://api.jquery.com/load-event/

Answer 2

$('a#yourLinkId').click(function(e){
  // prevents default behaviour
  e.preventDefault();

  // your stuff
  $.colorbox({opacity:0.3, href:"ext/popup.php"}); 

});

Answer 3

No problem. You can ask any question about JQuery here in Stackoverflow and we try to help.

About your question. I think you want to use JQuery to load the page inside the ColorBox instead of the default action which is loading the URL in the main window.

You need to do two things:

1. Bind an event handler to all the anchor tags ( <a> ) so whenever they are clicked your event is run.
2. Prevent the default event handler from openning the URL (preventDefault)

You can bind your event to all anchor tags like this:

//for all links that exist on this page up to when this line is executed
$("a").click(function(){...});

But I suggest binding your events using the on() button. That way all <a> tags will run this event handler even if they are created after your event binding code is run.

//for all links that are created on this page even after this lines of code is executed
$("a").on( "click", function(){...});

For preventing the default action (browsing to the page), you simply use the preventDefault() method:

//assuming event argument is called e
e.preventDefault();

Having said that, your code will look like this:

<script type="text/javascript">
//this will run when the current document is loaded
$(document).ready(function(){
    $("a").on("click",function(e){
        e.preventDefault();
        //$(this).attr("href") contains the href attribute of the <a> tag
        $.colorbox({opacity:0.3, href:$(this).attr("href")});
    });
});
</script>