XF 2.1 Does xf-overlay support having custom markup overlays instead of calling a route?

Ian Hitt

Well-known member
Does xf-overlay support having custom markup overlays instead of calling a route? Similar to how dropdown menus can use the markup of a menu that comes after a menu trigger. Do overlays have a similar function available?
 

Russ

Well-known member
I'm pretty sure that applying data-target=".selector" to a data-xf-click="overlay" element will load an overlay from that HTML. (It doesn't look like we use this in the default code though so it's possible there are some quirks.)

Nice, that seems to work! I'm curious if there's a way of setting the title on the overlay, using <xf:title> in the menu obviously would set it for the page where the menu is set. Maybe this is one of the quirks :D.
 

Mike

XenForo developer
Staff member
I think you'd need to include all of the overlay wrapper content in the HTML as well (the .overlay element, .overlay-title, .overlay-content, etc).

Otherwise you'd probably need some custom JS to setup the overlay the way you want.
 

Russ

Well-known member
Thank you Mike! For anyone else curious about how to get custom overlays to load, something like the following seems to do the trick. It removes the custom class of "custom-overlay" when it does load which is a bit disappointing as it doesn't seem you can set a unique class on that parent "overlay-container" level.

Code:
<span data-xf-click="overlay" data-target=".custom-overlay">Click me!</span>
<div class="overlay-container custom-overlay">
    <div class="overlay">
        <div class="overlay-title">
            Custom overlay title
        </div>
        <div class="overlay-content">
            <div class="block-container">
                <div class="block-body">
                    <div class="block-row">
                        This actually works :)
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 

Joe Link

Well-known member
It removes the custom class of "custom-overlay" when it does load which is a bit disappointing as it doesn't seem you can set a unique class on that parent "overlay-container" level.

This is disappointing, it'd be nice to be able to style overlays and menu's differently.

Has anyone figured out how to add a custom class to the overlay-container?
 
Top