# Modal Setting

**URL:** <https://forums.realmacsoftware.com/t/modal-setting/53168>\
**Category:** Elements\
**Created:** [December 12, 2025, 10:41am UTC](https://forums.realmacsoftware.com/t/modal-setting/53168 "2025-12-12T10:41:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [December 12, 2025, 10:41am UTC](https://forums.realmacsoftware.com/t/modal-setting/53168/1 "2025-12-12T10:41:00Z")

</div>

I am trying to add a modal which I will reuse for offers throughout year on my store. I can do modal and I can make it pop up. What I am struggling with is I just want it to pop up once per visit and not every time someone goes from one page back to home again.

Is there a setting or a piece of HTML code I need to make it appear once only per visit? TIA

@dan @ben @handshaper @upssjw

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 12, 2025, 12:46pm UTC](https://forums.realmacsoftware.com/t/modal-setting/53168/2 "2025-12-12T12:46:22Z")

</div>

Yes you can do this with a little script and a little inspector work:

This script goes in “head end” of the pages code editor.

```javascript
<script>
(function () {
  const MODAL_ID = "rwCE065B09_D924_438B_8C61_8F18EB615320";
  const TRIGGER_ID = "mymodal";
  const KEY = "modal_last_shown_" + MODAL_ID;
  const COOLDOWN_DAYS = 7;
  function allowed() {
    const last = parseInt(localStorage.getItem(KEY) || "0", 10);
    if (!last) return true;
    const days = (Date.now() - last) / (1000 * 60 * 60 * 24);
    return days >= COOLDOWN_DAYS;
  }
  function hideDialog() {
    const dlg = document.querySelector(`[data-modal-id="${MODAL_ID}"]`);
    if (dlg) {
      dlg.style.display = "none";
      dlg.setAttribute("aria-hidden", "true");
    }
    if (document.documentElement) document.documentElement.style.overflow = "";
    if (document.body) document.body.style.overflow = "";
  }
  function neutralizeTrigger() {
    const trigger = document.getElementById(TRIGGER_ID);
    if (trigger) trigger.removeAttribute("x-init");
  }
  window.addEventListener("open-modal", (e) => {
    if (e?.detail?.id !== MODAL_ID) return;
    if (!allowed()) {
      e.stopImmediatePropagation?.();
      e.stopPropagation?.();
      hideDialog();
      neutralizeTrigger();
      return;
    }
    localStorage.setItem(KEY, String(Date.now()));
  }, true);
  function enforceIfBlocked() {
    if (!allowed()) {
      neutralizeTrigger();
      hideDialog();
    }
  }
  enforceIfBlocked();
  document.addEventListener("DOMContentLoaded", enforceIfBlocked);
  window.addEventListener("load", enforceIfBlocked);
  const mo = new MutationObserver(enforceIfBlocked);
  mo.observe(document.documentElement || document, { childList: true, subtree: true });
})();
</script>

```

```javascript
const MODAL_ID = "rwCE065B09_D924_438B_8C61_8F18EB615320";

```

You will need to change this (const MODAL\_ID) ☝ to that of your modal, this is not one you can set in advanced setting, you need to inspect the page with teh modal open, right click the modal background \> inspect element, you are looking for the data-modal-id

 ![CleanShot 2025-12-12 at 12 .42.29@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/9/d94dbfa911fc699cfa0ad44ec35482240128ba73.png)

With the modal selected inside elements add the id “mymodal” in advanced setting to match the script.

in the script you can change the number of cooldown days before the visitor will see the modal again.

```javascript
const COOLDOWN_DAYS = 7;

```

If you want to re-set it for your own testing, in the inspector go to storage \> local storage, and delete this key

 ![CleanShot 2025-12-12 at 12 .48.10@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/f/2fdc949fe95d8675096195edffa9a2c6e368bfb3.png)

[https://www.doobox.co.uk/Vault/Video/forum-posts/modalscript.mp4](https://www.doobox.co.uk/Vault/Video/forum-posts/modalscript.mp4)

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [December 12, 2025, 2:37pm UTC](https://forums.realmacsoftware.com/t/modal-setting/53168/3 "2025-12-12T14:37:30Z")

</div>

Gary wow the simple route! 🙂 🙂 🙂 I will have alook at this over weekend. as always I’m indebted to your prompt response. Just been using a little app called “Rapid Icons” which I’ve used for years! Ever heard of it? 🙂 🙂 🙂

---

<div class="post-metadata">

**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\
**Post date:** [December 12, 2025, 2:40pm UTC](https://forums.realmacsoftware.com/t/modal-setting/53168/4 "2025-12-12T14:40:54Z")

</div>

Vaguely remember that one. It’s still working on the current OS then 🤯

I think it was Yosemite I released that.

---

<div class="post-metadata">

**Author:** ![PMUK](https://avatars.discourse-cdn.com/v4/letter/p/7993a0/32.png) [@PMUK](https://forums.realmacsoftware.com/u/PMUK)\
**Post date:** [December 13, 2025, 11:15am UTC](https://forums.realmacsoftware.com/t/modal-setting/53168/5 "2025-12-13T11:15:05Z")

</div>

Yes I’m on ios26! Your work lasts forever! 🙂