How to show/hide Modal based on a cookie

Wappler General Need Help
1

I’m trying to put a simple modal up when a user first visits. The standard one about cookies being used and when they click agree the modal goes away.

I created a cookie, I created the modal. I have bound the value of the cookie to the modal button and defaulted it to 0. I have an “on click” action for the modal button that sets the cookie value to 1.

Then I have a show/hide on the modal to show when cookie is 0 and hide when cookie is 1.

If I set the modal to auto show it always comes up no matter what and when I turn auto show off the modal never comes up. Code below. Please help!

<div class="modal fade" id="modal2" is="dmx-bs4-modal" tabindex="-1" role="dialog" dmx-hide="cookies1.data.agree == 1" dmx-show="cookies1.data.agree != 1">

<button type="button" class="btn btn-dark" data-dismiss="modal" style="border-radius: 3px;" dmx-on:click="cookies1.set('agree',1,{expires: 180})" dmx-bind:value="cookies1.data.agree.default(0)">AGREE</button>
2

Not sure, but theoretically this should work.

  1. do not use auto show
  2. select the modal
  3. under Dynamic Attributes Modals > Modal Show
  4. under When: choose the Cookie Manager > data
  5. under the formatter, right click cookies.data > Operation
  6. choose the != operator
  7. choose the value of the Cookie, which is 1.
  8. save everything.

This should show the modal if the cookie value is 0 and not show the modal if the cookie value is 1.

1 Like
4

Hi Norm,
There is a special dynamic show attribute for modals. You should select the modal > show in the dynamic attributes:

Screenshot_6
Screenshot_6.jpg546×557 30.1 KB

Then add your condition there: cookies1.data.agree != 1

Remove the dmx-show and dmx-hide attributes you already applied to the modal.

3 Likes
5

Very good information, also for alot of other solutions and not only modal!

1 Like
6

Here's a tutorial covering this topic:

1 Like
7

Thanks this worked and it is funny I did not see the bottom of the post and I first tried cookies1.data.agree == 0, and that did not work because on the first go the cookie is not set yet. I figured it out and I was going to come back and mention it and then noticed I was too late - you guys are too good and too fast.

Thanks so much for the help

1 Like