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

Ian Hitt

Ian Hitt

Well-known member
Licensed customer
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?
 
Sort by date Sort by votes
Mike said:
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.)
Click to expand...

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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
Russ said:
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.
Click to expand...

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?
 
Upvote 0 Downvote
You must log in or register to reply here.
Back
Top Bottom