Background Overlay

playbasfa

Hello, I would like to know how could I make appear a background overlay when clicking on the main button.
I need that because the Buttonizer buttons are not really well readable otherwise.

Thank you,
Fabrizio

James

Hi playbasfa ,

Welcome to the forums! 🥳

Could you perhaps send us a screenshot of your buttons to give us a better idea on what you meant with the buttons not being readable?

Thanks in advanced! 😄

James

oren playbasfa ,

Thanks for the example screenshots!

Is this somewhat how you wanted it?

Here's the custom CSS that I made:

.buttonizer .buttonizer-button:not(.buttonizer-head):after {
    background-color: red;
    width: 190px;
    height: 50px;
    content: ".";
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    color: transparent;
}

You'll need to change the background-color to your liking and the width to fit your button labels in.

Let me know if this work for you! 😁

oren

I'd like this option as well. It will make it look more as a floating menu, and much more readable.
This is how it looks now:

And this is how it should be (optionally):

Thanks!

playbasfa

Hi, thank your for your reply.
The thing is that I would like to change the background of the whole page.

It's a common UX pattern pattern when clicking on a button that trigger an overlay, Elementor for example by default have this on his settings when triggering a popup, it's weird that you don't have it and that nobody never request it because it's really really common in a lot of websites.
If you still don't know what I mean try to go here -> http://www.corelangs.com/css/box/fulloverlay.html# and click on "Click here to login" to know what I mean.

Hope you can help better now,
Thanks,
Fabrizio

James

Hi playbasfa ,

Thanks for further clarifying you request.

I've made a custom script that makes an overlay:

Here's the script:

<script>
  let overlay = document.createElement("div");
  overlay.style.id = "cover";
  overlay.style.position = "fixed";
  overlay.style.top = 0;
  overlay.style.left = 0;
  overlay.style.background = "#00000099";
  overlay.style.zIndex = 5;
  overlay.style.width = "100%";
  overlay.style.height = "100%";
  overlay.style.display = "block";
  overlay.style.opacity = 2;
  
  window.addEventListener("buttonizer_group_opened", (obj) => {
    if(obj.detail.open) {
      document.body.appendChild(overlay);
    }
    else if(!obj.detail.open && document.body.contains(overlay)) {
      document.body.removeChild(overlay);
    }
  })
</script>

Place it into your site's header or footer.
I recommend using the plugin Head, Footer and Post Injections to do this.

This seems like a great feature to have!
I'll add this into the feature request list. 🙂

Let me know if this works or you!

playbasfa

Hello, thank you it's working! The problem is that for how my website is made I don't have footer and header in most of the pages right now I'm using workaround but when you'll add this feature by default for me would be great. Would be possible to answer to this post when you do it?

Thank you,
Fabrizio

Jasper

playbasfa Awesome!

We'll let you know as soon as we've added it to our feature list! That probably will be in Q2 or early Q3! 🙂

If you have any other feature requests, let us know!

aldamiz

Hi James this is a great feature and your script worked great for me. I have a request: could you please add the ability to exit the buttonizer menu with the escape key (in desktop) and just by tapping outside the menu area (on mobile)? It's a small feature but I believe many people exist these type of menus by doing those actions. Thanks!

FinancialIntelligence

Hi everyone.

It seems that the script stopped working with the buttonizer update (Versión 2.4.3). I do not know if the "eventlistener" mouseup still working, or its name changed. Could you help me with this problem in order to make the overlay work again? Thanks

Here is the last entire script:

Mod note: Updated code https://community.buttonizer.pro/d/201-background-overlay/12

James

Hi FinancialIntelligence ,

Since version 2.2, we've actually improved our Buttonizer API and removed the buttonizerInitialized() function.

Now, if you want to replicate the old code above, we can make it a lot smaller.

<script>
  let overlay = document.createElement("div");
  overlay.style.id = "cover";
  overlay.style.position = "fixed";
  overlay.style.top = 0;
  overlay.style.left = 0;
  overlay.style.background = "#00000099";
  overlay.style.zIndex = 5;
  overlay.style.width = "100%";
  overlay.style.height = "100%";
  overlay.style.display = "block";
  overlay.style.opacity = 2;
  
  window.addEventListener("buttonizer_group_opened", (obj) => {
    if(obj.detail.open) {
      document.body.appendChild(overlay);
    }
    else if(!obj.detail.open && document.body.contains(overlay)) {
      document.body.removeChild(overlay);
    }
  })
</script>

If you want to know what you else can you do with the new Buttonizer API, we have a knowledge base topic here:
Buttonizer JavaScript API

Let me know if this works for you! 😁

FinancialIntelligence

It works perfect, thank you a lot @James for your help!! also the API its quite simple but pretty functional. Thank you very much.

Another question @James ,and sorry if its too obvius. Once the Buttonizer is open, and the Overlay was displayed, How can I add if the user clicks in every part of the web page to close the Buttonizer again? Thanks

James

Glad to hear that it worked! 😄

Another question @James ,and sorry if its too obvius. Once the Buttonizer is open, and the Overlay was displayed, How can I add if the user clicks in every part of the web page to close the Buttonizer again?

You can maybe use the "Close on click outside" feature to do this.
Close on click outside closes the group when the user clicks on any part of the web page.

After the group closes, it should trigger the event listener again to remove the overlay.

You can find this setting in the general tab of the group settings.

Jasper

Today we have introduced background overlay/backdrop support in the editor! No more code required 🙂

You enable this feature for all button-menus, it will show an overlay when a group is opened. To enable this for your menu, go to your groups Menu button, then open Menu style and enable Show backdrop when opened.

Feature GIF:

Editor setting: