Closable box for information

Having plenty time on hand… like most all of us I imagine…
I’m trying to find how to add a “box” on my main page to give information concerning bookings etc. and which can be closed by the visitor to have a normal view of the page.
Hope this is clear ? My French is better than English nowadays !!!
Many thanks to y’all

1 Like

@AlanC76, For now this “modal” type setting isn’t doable in Sparkle.

1 Like

Thanks for your reply.
I’ve found a way round it by adding a box and text grouped together and fixed at bottom of page.
With a 5 second delay, visitors have time to see they can scroll the page before the box arrives ! Not perfect, but it’s only for the covid 19 lockdown period here in France… maybe another 4-5 weeks :frowning:

Take care !

BTW, if you’re curious… https://alancountry.fr

@AlanC76, Well thought out! I did this a while back but a few of my clients didn’t take to it so I’m waiting for the function in Sparkle tp appear shortly!

I had my “modal” appearing on the right hand side of the footer. It appeared when a person scrolled down to the footer that way it didn’t interfere with anything, but like I mentioned it wasn’t ideal.

Likewise, keep positive and take care! :slight_smile:

2 Likes

Hello,
I like this idea. Perhaps it is possible to realize a closable textbox with a button and a little javascrpit code? Maybe this is not very difficult but I‘m sorry, I would like to try it, but I can‘ javascript.
Best greetings
Horst

1 Like

I’m sure if we ask really nicely Duncan could find a little spare time to add this feature :innocent: :innocent:
Would really be useful for loads of things !

1 Like

HI Horst

It is possible with a little javascript, but needs HTML element id customization in the settings. Disadvantage: Your visitor will see these informations every time he opens that page. That could be exaggerating when needing to click it away every time.

However, I can provide you with this:

  • enable Code Integration in the Site Settings under «Miscellaneous»
  • Build up your informations on a box, insert a button or link (doing nothing) and group all. Give that group an ID-name in the arrange inspector, for example «information-box».
  • insert an «Embed»-box and put this code into it:
    <script >
    function toggle_visibility(id) {
    var e = document.getElementById(id);
    if(e.style.visibility == 'hidden')
    e.style.visibility = 'visible';
    else
    e.style.visibility = 'hidden';
    }
    </script>
  • now link the button or the link in the group with this code, where you set it to external content:
    javascript:toggle_visibility('information-box')

Change text «information-box» when your ID is another text.
A fugly quick-and-dirty example you will find on my page https://grafikvater.ch/Test/box.html

1 Like

Two screenshots as well for better understanding about settings and linking button:

Bildschirmfoto 2020-03-24 um 22.01.16

Bildschirmfoto 2020-03-27 um 19.25.43

1 Like