1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How to create an overlay

Discussion in 'Styling and Customization Questions' started by ibenick, Jan 13, 2013.

  1. ibenick

    ibenick Active Member

    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.
     
  2. Chris D

    Chris D XenForo Developer Staff Member

    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:

    Code:
    <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>
     
    Jake Bunce likes this.
  3. ibenick

    ibenick Active Member

    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!
     
  4. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
    Jake Bunce likes this.
  5. Bob

    Bob Well-Known Member

    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 ;)
     
    Chris D and ibenick like this.

Share This Page