CI: Jquery Pop-up

I’m working with HTML/Jquery code that our designer passed over to me so that I can integrate CI into it. The problem I’m having is that certain links use jquery to pop open light boxes, but once put into CI these no longer work. If I point the link to a controller, then load the pop up view, it simply loads the pop as an entire page, not a simple shadow box.

I've looked at the CI anchor_pop...is this the correct thing to use? In other words, as it stands, when using the code provided by the designer, the pop up opens perfectly (centered, sized-right, etc). In using the anchor_pop, while it calls my page, it also opens it up funky. Is there an easy way to simply call the page/jquery function as my designer has it 开发者_如何学JAVAset up as shown below? Thanks.

A code snippet from my view is as follows:

jquery:

$(function(){
$('form').jqTransform();
});
$(window).load(function  () {
$(".join-button a").fancybox().trigger('click');
});

Link:

<li class="join-button"><a href="pupup1.html">join</a></li>

Edited: I attempted the suggested removal of .trigger('click'), but no luck. Below is an image of what I want to happen, along with an image of what happens:

I think you should do:

$(window).load(function  () {
    $(".join-button a").fancybox();
});

if you .trigger('click') you simulate a simple click on the link and so you are taken to that page

You don't need to put the code into the $(window).load() function. Fancybox is a jQuery plugin so it should be used within the regular $(document).ready() function.

Nicola is right though, you don't want to trigger click on the element. Try this:

$(function(){
    $('form').jqTransform();
    $(".join-button a").fancybox();
});

Assuming you have all of your JS files loaded correctly, this should work.