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

[Joe Link]

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:

$(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?

$(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.

!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

 

[Joe Link]

Anyone?

 

[DimmmCom]

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:

<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>

 

[Joe Link]

Wow, incredible! That's way better.

Message me your PayPal and I'll buy you that coffee

 

[DimmmCom]

Hello. No thanks. I'm happy to help for free.

 

[Joe Link]

Well thank you again

 

[Robert9]

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.

 

[Orit]

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...

 

[Joe Link]

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.

<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 }}">

 

[Orit]

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

<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

 

[Orit]

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
Any other template will add the class, but not if it comes from a notice.
Let me know if you can...

 

[John917]

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.



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."

 

[Orit]

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:

.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...