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
Background Overlay
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!
- Edited
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! 
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
- Edited
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!
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
2 months later
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!
a year later
- Edited
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
<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;
function buttonizerInitialized() {
document.querySelector(".buttonizer-head").addEventListener("mouseup", (e) => {
if(e.target.classList.contains("buttonizer-head")) {
if(!e.target.parentElement.classList.contains("opened")) {
document.body.appendChild(overlay);
}
else {document.body.removeChild(overlay);}
}
else if (!e.target.classList.contains("buttonizer-head")) {
if(!e.target.parentElement.parentElement.classList.contains("opened")) {
document.body.appendChild(overlay);
}
else {document.body.removeChild(overlay);}
}
});
}
</script>
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!
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
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.
a year later
- Best Answerset by 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:
Jasper added the Implemented tag .
