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

Open html page in an overlay?

Discussion in 'XenForo Questions and Support' started by MsJacquiiC, Sep 25, 2012.

  1. MsJacquiiC

    MsJacquiiC Well-Known Member

    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?

  2. Jeremy P

    Jeremy P Well-Known Member

    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:
    Screenshot 2012-09-24 at 8.48.53 PM.jpg

    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.
    Jake Bunce and MsJacquiiC like this.
  3. Arty

    Arty Well-Known Member

    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):
    if (!isset($_GET['url']) || !isset($_GET['_xfResponseType']) || $_GET['_xfResponseType'] != 'json')
        header('HTTP/1.1 404 Not Found');
        echo 'Invalid parameters.';
        $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.
  4. MsJacquiiC

    MsJacquiiC Well-Known Member

    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!

  5. Jeremy P

    Jeremy P Well-Known Member

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

    daviden Active Member

    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.

Share This Page