Blur background when group is opened

James

Here's a script that creates a blur overlay while a group is opened:

<script>
    window.addEventListener("buttonizer_initialized", () => {
        let Buttonizer_counter = 0
        let overlay = document.createElement("div");
        overlay.className = "buttonizer-overlay"
        overlay.style.position = "fixed" 
        overlay.style.left = "0px"
        overlay.style.right = "0px"
        overlay.style.top = "0px"
        overlay.style.bottom = "0px"
        overlay.style.zIndex = "999"
        overlay.style.backdropFilter = "blur(5px)"
        overlay.style.pointerEvents = "none"
        overlay.style.opacity = "0"
        overlay.style.transition = "all 250ms ease-in-out 0s"
        document.body.appendChild(overlay)
        window.addEventListener("buttonizer_group_opened", (obj) => {
            if(obj.detail.open) {
            Buttonizer_counter++
            if(Buttonizer_counter === 1) document.querySelector(".buttonizer-overlay").style.opacity = 1
            }
            if(!obj.detail.open) {
            Buttonizer_counter--
            if(Buttonizer_counter === 0) document.querySelector(".buttonizer-overlay").style.opacity = 0
            }
        });
    });
</script>

It should look like this:

Let me know if this works for you! 😁

Eneia

James
Look awesome! This is for what i looking for.

Eneia

Hello. Sorry James for being late. I know .... it's a stupid question but where am I going to paste the script you pointed out to me? In the js file via ftp? Thanks

James

Eneia ,

No worries! 😃

You can use a plugin like this to add it to your site:
Head, Footer and Post Injections

After installing this plugin, go to Settings -> Header and Footer in the WordPress admin page.

Scroll down to the bottom of the page and paste the script above inside BEFORE THE </BODY> CLOSING TAG (FOOTER)

Click save and that should be it! 😄

Eneia

Yesss !! It worked!! Buttonizer has many possibilities of use, unfortunately being new to this field I still have to ask how some things are done. Thank you so much James for the availability !!

p.s:
1 - I'm looking at how to open a window inside a popup (always with Buttonizer !!)
2 -When I finish the work on the site / platform can I insert the fact that some parts have been made with Buttonizer?

James

Hi Eneia ,

Glad to hear that it worked! 😄

"I'm looking at how to open a window inside a popup (always with Buttonizer !!)"
Sorry, I don't quite understand this question.
Would you like to open a popup? And inside this popup is a page of your site?

If so, you could maybe use Popup Maker and use an Iframe to display your page.

"When I finish the work on the site / platform can I insert the fact that some parts have been made with Buttonizer?"
As long as Buttonizer is installed and your site is running on a WordPress environment, it should be fine 😄