I am not entirely sure what are you trying to achieve here. Which popup are you trying to hide and is this on mobile or desktop?

Behind this popup there is an iframe, and when you click on an iframe, then it is not possible to close it.

So what I want is to close the popup is by clicking on the pop-up itself.

There might be an acceptable solution with CSSto have a background activated on the notification icon when it is open so that users know that if they click on it, it will close the pop-up.

https://imgur.com/a/BvtYBE3

Sorry but I still don't understand what are you trying to achieve here because you have cropped those screenshots and I do not understand what "iframe" are you referring to here. Is that "iframe" part of EasySocial or is that something else?

Ok, please check the screenshot in attachment.

You will see the map behind the notification pop up which if the user clicks on will not close the pop up.

So solutions are : to use the javascript I provided but can you tell me where to place it?

Or : do you happen to know with css how I can give a background to the message notification button that is active so that the user knows he can click on it to close it?

To be honest, you are still cropping your screen shot so I really do not know what is visible or what are you referring to. Anyhow, in EasySocial, if you want to hide all of the pop up box, you should run the following codes:

EasySocial.ready(function($) {

	

var items = EasySocial.$('[data-popbox]');



items.each(function(i, item) {

	var popbox = $(item).popbox('widget');

	

	popbox.hide();

});

	

});

Thanks for the code Mark but I want to hide it on click as explained in the first post, I don't want to hide it in general.

On the picture, you see a pop up and a map behind, I only want that if I click on the pop-up it will close it like it is actually the case for easysocial menu dropdown module.

It works with this code

jQuery(document).ready(function(){

jQuery('#es.popbox--navbar').click(function(){

    jQuery('#es.popbox--navbar').hide();

});  

 });

However as explained, this code loads on page load but needs to load when the pop-up is open; do you happen to know where the js for the pop-up is located?

Sorry but I really have no idea what you are referring to and I cannot help you here. All your screen shots are either cropped and does not explain what you are trying to do.

In the picture of the map and the conversations, what item is clicked? and what are you trying to hide? Are you trying to click on the map or are you trying to click on the conversation or are you trying to click on the toolbar?

A bit of confusion we are having

To answer your question I just want to close the popbox for the conversation by clicking on it(just like my javascript function allows it).

Hm, maybe this is something that you can try:

EasySocial.ready(function($) {

    $('#es.popbox--navbar').on('click', function() {

        $('#es.popbox--navbar').hide();

    });

});

Your function, like my function, work if the popup is already opened.

What needs to be done is to apply this code it at the moment that the popup is opening and not on page load.

Hence this is why I was asking for the location of the js file for the popup at the beginning of this thread.

Try this:

EasySocial.ready(function($) {

    $(document).on('click', '#es.popbox--navbar', function() {

        $('#es.popbox--navbar').hide();

    });

});

Great thank you Mark, we are almost there :

Only now if you close the popbox and click on the toolbar button to reopen it then it you must click twice on the button instead of once.

I can't help you further on this as this is beyond the scope of our support but I will try just this last one:

EasySocial.ready(function($) {

    $(document)

        .off('click.xyz')

        .on('click.xyz', '#es.popbox--navbar', function() {

        $('#es.popbox--navbar').hide();

    });

});

It is working using the following :

jQuery(document).ready(function() {

EasySocial.ready(function($) {

    $(document).on('click', '#es.popbox--navbar', function() {

        $('.o-nav__link.es-toolbar__link.active').click();

    });

});

  });

Rather than using hide(), I just make it click() on the active toolbar button again so that we avoid the previous issue.
You can see the result in attachment as I added a crossbar that is now clickable.

Thanks a lot for the support Mark, I could not have solved this without you !

Kind regards,

Matt,

Great, glad that your issues are resolved now