How to create an overlay

[ibenick]

I'm working on some customizations to Bobster's Showcase add-on and I want to be able to display the content of a div in an overlay when someone clicks on a link. What code do I use in the link to make that happen?

I apologize for asking if this has been covered elsewhere, I searched and couldn't find exactly what I was looking for.

 

[Chris D]

You need to apply add a specific class to your link.

class="OverlayTrigger"

The format of the template then displayed needs to be quite specific for it to be displayed properly.

This should work:

<div class="section">
	<dl class="subHeading pairsInline"><dt>Heading:</dt> <dd>Sub Heading</a></dd></dl>
	<ol class="overlayScroll">
		Content
	</ol>
	<div class="sectionFooter overlayOnly"><a class="button primary OverlayCloser">{xen:phrase close}</a></div>
</div>

 

[ibenick]

Thanks, Chris.

I'm a little confused on how to implement that though. Specifically, what would I link to (href=?) to bring that div into the overlay, and how would I keep it hidden until that time? Thanks for your help!

 

[Chris D]

Unfortunately, that's not how it works.

The href is usually a link to another page in your site. Ordinarily this would be something like {xen:link showcase/some-page} so basically it would need to be a completely separate page that you can normally access.

This means if you're wanting to create custom pages you would need an understanding of how to do this using PHP and to create an add-on that would add additional actions to the Showcase controller.

 

[Bob]

Hey Nick, give me a call sometime this week and I will walk you through this. Its really easy to do With what I already taught you, this will only take about 5 or 10 minutes for you to accomplish the functionality and then you can take all the time you want styling it and doing the layout stuff within the overlay itself. This is very easy compared to the stuff you have already modified