Pop-Up content

[johngwms]

I would like to trigger information to be displayed in a pop-up window by pressing a button on a product page.

This would be used for information such as "What does it include" etc.

The information would be stored in a fragment and the mechanism would be powered by javascript to facilitate an elegant transition.

Any ideas?

John

[NormanRouxel]

There's a significant amount of work involved so I can only give general ideas of how I'd go about it.

FancyBox V1: Use a heavily customised Fragment Layout that places the Fragment contents in a hidden div with common classname (fancydiv) and an unique ID (FragmentAnchor perhaps). Generate a link around the fragment name with an href to the hidden div's ID. Add jQuery and FancyBox (http://fancybox.net/) and some start-up code to attach FancyBox to each link.

So your Fragment Code becomes:

<a class="fancydiv" href="#div_<actinic:variable name="FragmentAnchor" />"><input type="button" value="<actinic:variable Name="FragmentTitle"/>" /></a>

<div style="display:none">
<div id="div_<actinic:variable name="FragmentAnchor" />">
FRAGMENT LAYOUT CODE HERE
</div>
</div>

And in your jQuery have something like:

$(document).ready(function() {
	$("a.fancydiv").fancybox();
});

All untested and unsupported.

UPDATE: Tweaked code above so best revisit it, tested it and it works.

[johngwms]

Looks good Norman!

Thanks for the tip. I will do some expertimenting.

John

[saucysal]

Why not Extended Info in Pop Up - Easy

I may have misunderstood, but wouldn't it be much easier to have the information in Extended Info, as a pop-up, which is a standard option in the software. We use this for the ingredients and nutrition information of all our products.

Sarah

[johngwms]

Thanks for the tip Sarah.

I need to have several popups for different things, each driven by a button onscreen.

The Extended Info page is a bit too limiting. Using JQuery and an add-on such as FancyBox is a really elegent solution as it allows custom designed popups to be created with fade in and out without replacing the original screen content. It keeps the viewers' focus on the page.

I have almost finished my crash course in css and JQuery and I think the time investment will be worth it.

John