Open html page in an overlay?

[JacquiiDesigns]

I want to open an html page which is hosted on my server in an overlay.
Here's the current code I have:

<a href="{xen:link facebook/likebox.html}" class="OverlayTrigger navlike" title="Like Us on Facebook"></a>

Unfortunately this doesn't work - I receive the error "The following error occurred. The server responded with an error. The error message is in the JavaScript console." when clicking the link.

Is opening an html page in an overlay even possible?

J.

 

[Jeremy P]

You can open anything in an overlay but the response has to be formatted correctly.

I believe XenForo automatically detects AJAX requests and responds appropriately, so you'd have to modify your page to do the same.

The response from the contact page here at XF.com is:


So you need to return an application/json response with JSON content including css, js, templateHtml, and title.
Css and js tell XF what additional css/js is required for that page to function correctly, templateHtml would be the html content of the overlay, and the title is the title displayed on the overlay.

You might want to create a small addon with a route to your custom page and the html in a template so XF's framework can handle the rest.

 

[Arty]

I've ran into similar problem recently. Problem was, I couldn't alter output of HTML page that I wanted to open and I wanted to open it in iframe.

My solution was to create separate script "overlay.php", in that script output JSON data required for by XenForo overlay. Script looks like this (a bit more complex, this is a basic version without any error checking):

<?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" style="background-color: #fff;"><iframe style="border-width: 0; border-style: none;" src="' . htmlspecialchars($url) . '"></iframe></div></form>',
        'css' => '',
        'js' => '',
        'title' => isset($_GET['title']) ? $_GET['title'] : 'Style Demo',
    );
    echo json_encode($data);
}

and overlay URLs looked like this:

<a href="/whatever" data-href="overlay.php?url=/whatever" class="OverlayTrigger">text</a>

Link will redirect to full page if javascript is disabled, overlay if javascript is enabled.

I hope this helps.

Maybe I've missed something, those are only small parts of solution I used. Look in js/xenforo/full/xenforo.js for implementation of OverlayTrigger handler if you want to create your own handler to do something differently.

 

[JacquiiDesigns]

Sweet! Thank you both for your suggestions.
I'm a bit busy now - but when I get back to my forum - I will certainly try = so thanks very much!

J.

 

[Jeremy P]

I've ran into similar problem recently. Problem was, I couldn't alter output of HTML page that I wanted to open and I wanted to open it in iframe.

That's actually a pretty neat solution, thanks for sharing.

 

[daviden]

I've ran into similar problem recently. Problem was, I couldn't alter output of HTML page that I wanted to open and I wanted to open it in iframe.

My solution was to create separate script "overlay.php", in that script output JSON data required for by XenForo overlay. Script looks like this (a bit more complex, this is a basic version without any error checking):

<?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" style="background-color: #fff;"><iframe style="border-width: 0; border-style: none;" src="' . htmlspecialchars($url) . '"></iframe></div></form>',
        'css' => '',
        'js' => '',
        'title' => isset($_GET['title']) ? $_GET['title'] : 'Style Demo',
    );
    echo json_encode($data);
}

and overlay URLs looked like this:

<a href="/whatever" data-href="overlay.php?url=/whatever" class="OverlayTrigger">text</a>

Link will redirect to full page if javascript is disabled, overlay if javascript is enabled.

I hope this helps.

Maybe I've missed something, those are only small parts of solution I used. Look in js/xenforo/full/xenforo.js for implementation of OverlayTrigger handler if you want to create your own handler to do something differently.

Any idea to always center the popup? It's static and doesn't adapt when resizing the browser. Also, doesn't show up correctly in the mobile.

 

[JacquiiDesigns]

I've ran into similar problem recently. Problem was, I couldn't alter output of HTML page that I wanted to open and I wanted to open it in iframe.

My solution was to create separate script "overlay.php", in that script output JSON data required for by XenForo overlay. Script looks like this (a bit more complex, this is a basic version without any error checking):

<?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" style="background-color: #fff;"><iframe style="border-width: 0; border-style: none;" src="' . htmlspecialchars($url) . '"></iframe></div></form>',
        'css' => '',
        'js' => '',
        'title' => isset($_GET['title']) ? $_GET['title'] : 'Style Demo',
    );
    echo json_encode($data);
}

and overlay URLs looked like this:

<a href="/whatever" data-href="overlay.php?url=/whatever" class="OverlayTrigger">text</a>

Link will redirect to full page if javascript is disabled, overlay if javascript is enabled.

I hope this helps.

Maybe I've missed something, those are only small parts of solution I used. Look in js/xenforo/full/xenforo.js for implementation of OverlayTrigger handler if you want to create your own handler to do something differently.

Hey @Arty - Thanks again for providing such an eloquent solution for opening an html page in an overlay.
It worked nicely for XF 1.x series. Would you happen to know of a way to augment the code so that it works properly in XF 2.1.x?
I would appreciate very much the assistance if you can please.
Thanks!

J.

 

[Arty]

Would you happen to know of a way to augment the code so that it works properly in XF 2.1.x?

No, I didn't look at that part of XF2. However it should be similar. Just looking at reactions overlay, it still uses _xfToken and _xfResponseType=json in query, so parameters are the same. So that code might actually work. Instead of class="OverlayTrigger" use data-xf-click="overlay"

 

[JacquiiDesigns]

No, I didn't look at that part of XF2. However it should be similar. Just looking at reactions overlay, it still uses _xfToken and _xfResponseType=json in query, so parameters are the same. So that code might actually work. Instead of class="OverlayTrigger" use data-xf-click="overlay"

Thanks so much for the quick reply @Arty!!!
I actually did try what you've suggested. And it returned a console error in Developer tools...
I believe I've found a solution that will actually work fine for my needs though! I've created an additional help page. Since what I'm trying to do is simply place a disclaimer of sorts in the overlay - adding the help page seems appropriate enough. I can then just link the url as such:

<a href="{{ link('help/disclaimer') }} " data-xf-click="overlay">Please Note The Following Disclaimer</a>

The page opens in a neat overlay now. It was a bit of a quick fix so to speak - but works nicely enough.
Still though, it would be nice if you could provide the code as for linking external html pages as your original code did. It worked so well and perhaps someone else can benefit from the info share as well.

Cheers! And thanks again!

J.

 

[Scandal]

Could we open an html file on the domain / server instead of a xF2.x.x template page?