CODEWITHSUNDEEP
jquerymodal-dialogcolorboxhtml-content-extraction
ronni
ronni

Reputation: 185

load content from page.. by the href of a class... inside a modal

Trying to do the following: my page has got a lot of div's with 's to open modalboxes (colorbox). The pages that these links open got an id="mainColumn". Content need only to be loaded from this id.

I've got this:

<div>                       
<a href="includes/page_1.html" class="modal"></a>
</div>

<div>                       
<a href="includes/page_2.html" class="modal"></a>
</div>

<div>                       
<a href="includes/page_3.html" class="modal"></a>
</div>


 $(".modal").colorbox({
    width:900,
    href: $(".modal").attr('href') + " #mainColumn"
    });

It works great... Except that the href's of al of the 's change into the first one...

So includes/page_3.html changes into includes/page_1.html or in other words: All of the modalboxes show the same content...

any help would appreciated, thanks

Upvotes: 1

Views: 464

Answers (3)

Jack
Jack

Reputation: 9548

You could do this:

$(".modal").colorbox({
    width:900,
    href: function(){ return $(this).attr('href') + " #mainColumn"; }
});

Or this:

$(".modal").each(function(){
    $(this).colorbox({
        width:900,
        href: $(this).attr('href') + " #mainColumn"
    });
});

Upvotes: 0

ronni
ronni

Reputation: 185

$(".pop").each(function() {
  var el = $(this);
  el.colorbox({
    href: el.attr('href') + " #mainColumn"
  });
});

Upvotes: 0

Shyju
Shyju

Reputation: 218762

use $(this) to get the current (clicked) one 

$(".modal").colorbox({
    width:900,
    href: $(this).attr('href') + " #mainColumn"
});

Upvotes: 1

Related Questions