CODEWITHSUNDEEP
alpine.js
CreateSean
CreateSean

Reputation: 1386

Alpine Modal open on page load, but nonce closed don't open on new page loads

I'm having some trouble with the $persist plugin. My modal opens on page load as expected. However when I close the modal and go to another page, I don't want it to open again.

https://codepen.io/createsean/pen/MWQOvpx codepen above shows working modal but this loads on all page loads - javascript clicks hidden button on page load.

What I want to do is have the modal show on the first page load and then subsequent page loads not show up. I think that I need to use the $persist plugin and the $store magic

However I am unable to figure out how to get this working please advise.

HTML

<div x-data="{ noticeModal: $persist(false).as('notice-modal').using(sessionStorage) }" class="flex justify-center">
    <!-- Trigger -->
    <span x-on:click="noticeModal = true" id="open-notice-modal" class="hidden">
        <button type="button" class="bg-white px-5 py-2.5 rounded-md shadow">
            Open dialog
        </button>
    </span>

  <p class="my-12 text-2xl max-w-2xl mx-auto">A hidden button gets clicked on page load + 2 seconds and opens the modal. But it does it on every page load, when it should only be on first page load.</p>
    <!-- Modal -->
    <div
      x-show="noticeModal"
      style="display: none"
      x-on:keydown.escape.prevent.stop="noticeModal = false"
      role="dialog"
      aria-modal="true"
      x-id="['modal-title']"
      :aria-labelledby="$id('modal-title')"
      class="fixed inset-0 z-50 max-w-lg mx-auto overflow-y-auto"
      x-transition:enter.duration.300ms
      x-transition:leave.duration.200ms>
      <!-- Overlay -->
      <div x-show="open" x-transition.opacity class="fixed inset-0 bg-black bg-opacity-50"></div>

      <!-- Panel -->
      <div
        x-show="open" x-transition
        x-on:click="noticeModal = false"
        class="relative flex items-center justify-center min-h-screen p-4">
        <div
          x-on:click.stop
          x-trap.noscroll.inert="noticeModal"
          class="relative w-full max-w-2xl p-12 overflow-y-auto bg-white shadow-lg">
          <!-- Title -->
          <h2 class="mt-4 mb-4 text-3xl font-bold text-center uppercase text-pinkBrand" :id="$id('modal-title')">My Title</h2>
          <!-- Content -->
          <div class="prose">
            some copy here
          </div><!-- /.prose -->

          <button
            type="button"
            x-on:click="noticeModal = false"
            class="absolute top-4 right-4">
              X
          </button>

        </div>
      </div>
    </div>
  </div>

javascript

// wait for dom to load then click the button that triggers the modal
    document.addEventListener("DOMContentLoaded", function(event) {
      let pagebutton= document.getElementById("open-notice-modal");
      // load modal after 2 seconds
      setTimeout(() => {
        pagebutton.click();
      }, "2000")
    });

Upvotes: 1

Views: 2372

Answers (1)

Dauros
Dauros

Reputation: 10557

You should create an independent state variable in the sessionStorage that tracks only whether the modal window was opened or not. Let's call it noticeModalOpened. In the x-init attribute (so we don't have to write the extra JS), we first check noticeModalOpened state variable from the sessionStorage and enqueue an opening event only on the first page load. After the opening event we flip this state variable as well, so next time we wont open the modal again.

<div x-data="{ noticeModal: false, noticeModalOpened: $persist(false).as('notice-modal').using(sessionStorage) }"
     x-init="if (!noticeModalOpened) {setTimeout(() => {noticeModal = true, noticeModalOpened = true}, 2000)}">
  <!-- Trigger -->
  <span @click="noticeModal = true, noticeModalOpened = true" id="open-notice-modal">
    <button type="button" class="bg-white px-5 py-2.5 rounded-md shadow">
      Open dialog
    </button>
  </span>
  <!-- Modal -->
</div>

Upvotes: 2

Related Questions