XF 2.2 How do I add a class to .overlay-container with JS?

Joe Link

Well-known member
What I'm trying to do is add a class to the overlay-container when a specific button is clicked, so that I can change the CSS behavior of specific overlays (some normal, some ease-in, etc). I don't know JavaScript, but I know it's possible and I know I'm close. Comments as to why it's not a good idea are also welcome, if that's the case! :)

This works to apply "conversation-overlay" the "p-pageWrapper" class when the button with "js-badge--conversations" is clicked:

JavaScript:
$(function () {
    $(".js-badge--conversations").click(function () {
        $(".p-pageWrapper").addClass("conversation-overlay");
    });
});

Unfortunately, this does not. I imagine it's because the container isn't created until the button is clicked?

JavaScript:
$(function () {
    $(".js-badge--conversations").click(function () {
        $(".overlay-container").addClass("link-conversation-overlay");
    });
});

I also tried modifying this code which does work, and it appears to add the class based on the contents (#content-id) of the overlay (even more useful than the above!), but I couldn't get it to work.

JavaScript:
!function ($, window, document) {
    "use strict";

    var $testoverlay = $('.overlay-container #content-id');

    if ($testoverlay.length) {
        $testoverlay.closest('.overlay').addClass('contentOverlay');
    }
}
(jQuery, window, document);

Any ideas? Happy to buy a coffee for what I'm positive is five minutes time for someone who knows what they're doing 🤣
 
Solution
Why JS? Use the data-overlay-config attribute. For example, if you need to style a certain overlay, then in the required template after data-xf-click="overlay" add data-overlay-config="{{ {'className':'your_class'}|json }}"
For example:
HTML:
<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn"
                            data-xf-click="overlay" data-overlay-config="{{ {'className':'your_class'}|json }}" data-follow-redirects="on">
                            <span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
                        </a>
Why JS? Use the data-overlay-config attribute. For example, if you need to style a certain overlay, then in the required template after data-xf-click="overlay" add data-overlay-config="{{ {'className':'your_class'}|json }}"
For example:
HTML:
<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn"
                            data-xf-click="overlay" data-overlay-config="{{ {'className':'your_class'}|json }}" data-follow-redirects="on">
                            <span class="p-navgroup-linkText">{{ phrase('log_in') }}</span>
                        </a>
 
Last edited:
Solution
You may also kno, please
how can i:

open resource_view in an overlay (with data-xf-click="overlay" from resource_list)

but:
now i want to open the reviews just right here in this overlay also.
but the resource_thread i want to open in a normal page again.
 
Why JS? Use the data-overlay-config attribute. For example, if you need to style a certain overlay, then in the required template after data-xf-click="overlay" add data-overlay-config="{{ {'className':'your_class'}|json }}"
What element gets the class name?
I'm trying to figure out if it doesn't work or am I just looking in the wrong place...
 
What element gets the class name?
I'm trying to figure out if it doesn't work or am I just looking in the wrong place...

You add it to the end of the code for the button/link which triggers the overlay. I can confirm this works great.

Code:
<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn"
                            data-xf-click="overlay" data-follow-redirects="on" data-overlay-config="{{ {'className':'your-class'}|json }}">
 
You add it to the end of the code for the button/link which triggers the overlay. I can confirm this works great.

Code:
<a href="{{ link('login') }}" class="p-navgroup-link p-navgroup-link--textual p-navgroup-link--logIn"
                            data-xf-click="overlay" data-follow-redirects="on" data-overlay-config="{{ {'className':'your-class'}|json }}">
so just a bug on our website :confused:
 
Last edited:
You add it to the end of the code for the button/link which triggers the overlay. I can confirm this works great.
OK, I got it.

The code data-overlay-config="{{ {'className':'your-class'}|json }}" does not work in notices :D
Any other template will add the class, but not if it comes from a notice.
Let me know if you can...
 
I can't seem to get the overlay width to be 80%

I have the space on the right as shown in the img below.

1661645376260.webp

Anything I can do to fix the width issue? The data-overlay-config works but it doesn't directly affect the "overlay" class so I'm a bit stuck.
Below is the "customoverlaywidth" that integrated with the code you guys provided.
I need to edit the subset div with class "overlay."

1661645481962.webp
 
Anything I can do to fix the width issue? The data-overlay-config works but it doesn't directly affect the "overlay" class so I'm a bit stuck.
Below is the "customoverlaywidth" that integrated with the code you guys provided.
I need to edit the subset div with class "overlay."

View attachment 272615
I didn't quite get what you are tying to do:
If you mean the width you set in:
CSS:
.customoverlaywidth .overlay {
    max-width: 25vw;
}
^^ That code should change the width of the overlay container.

If you want the image to fill the whole line I'll need to see it live on your website...
 
Top Bottom