External pages in XenForo overlays?

[SoManyPosts]

How can I open another page in an xenforo overlay? What code should I use?

I also want it to be a callToAction button that opens it up.

 

[JacquiiDesigns]

I posted a thread a few weeks ago. Check it out ==> http://xenforo.com/community/threads/open-html-page-in-an-overlay.36651/

 

[SoManyPosts]

I posted a thread a few weeks ago. Check it out ==> http://xenforo.com/community/threads/open-html-page-in-an-overlay.36651/

Yeah I see what you mean, but I don't quite see what to add to the code line? Is there a simple solution for this?

 

[JacquiiDesigns]

Yeah I see what you mean, but I don't quite see what to add to the code line? Is there a simple solution for this?

I don't understand what you mean...
Check post #3 http://xenforo.com/community/threads/open-html-page-in-an-overlay.36651/#post-417572 -- I created & uploaded the overlay.php page and simply linked to it via html.

 

[SoManyPosts]

I don't understand what you mean...
Check post #3 http://xenforo.com/community/threads/open-html-page-in-an-overlay.36651/#post-417572 -- I created & uploaded the overlay.php page and simply linked to it via html.

Oh I see what you mean now. So I would just put this in my root or something and include it when I send external links.

 

[JacquiiDesigns]

Oh I see what you mean now. So I would just put this in my root or something and include it when I send external links.

Yes - however, one drawback is that only one link/page per overlay.php -- so if you have 2-3-4 pages - you'd need overlay2.php - overlay3.php - overlay4.php and so forth.

 

[SoManyPosts]

Wait it doesn't work because the overlay is tiny and can't display anything....

Trying to test by loading Google: http://puu.sh/1zaBE

 

[JacquiiDesigns]

Wait it doesn't work because the overlay is tiny and can't display anything....

Trying to test by loading Google: http://puu.sh/1zaBE

You'll need to make edits via css to display the contents of the iframe as whatever size you like. Here's the contents of my overlay.php

<?php
 
if (!isset($_GET['url']) || !isset($_GET['_xfResponseType']) || $_GET['_xfResponseType'] != 'json')
{
    header('HTTP/1.1 404 Not Found');
    echo 'Invalid parameters.';
}
else
{
    $url = $_GET['url'];
    $data = array(
        'templateHtml' => '<form id="DemoOverlay" class="xenForm formOverlay"><div class="DemoContainer"><iframe style="width:620px; height:490px; border-width: 0; border-style: none;" src="' . htmlspecialchars($url) . '"></iframe></div></form>',
        'css' => '',
        'js' => '',
        'title' => isset($_GET['title']) ? $_GET['title'] : 'Like JPiC Forum on Facebook',
    );
    echo json_encode($data);
}
 
?>

You'll notice the width/height attributes are defined. You could likely add the style to your EXTRA.css and define the iframe class. That'd make the code tidier.

Then call the overlay.php by similar html code in your template:

<a href="http://jpicforum.info/facebook/likebox.html" title="Like JPiC Forum" data-href="overlay.php?url=http://jpicforum.info/facebook/likebox.html" class="OverlayTrigger navlike"/>

HTH

J.

 

[SoManyPosts]

Ah I see, thanks for the help! I'll try this out tomorrow.

 

[SoManyPosts]

Hmm I think I got it, but how would you add something like this to extra.css?