How to prevent alpine.js modal from showing every time i refresh the page

8.7k Views Asked by codemebro At 19 October 2020 at 15:28

i'm using alpine.js for my project and I have a modal that works well with alpine.js, my problem is that whenever you refresh the page, it shows for a second or two (while the page loads) and then goes away. I don't want to see it onload. Is there any way to workaround that in alpine.js?

My code

// Initialize data
<body x-data="{openModal: false}"
 :class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>

// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content --> 
</div>
</body>

Original Q&A

There are 4 best solutions below

Hugo On 19 October 2020 at 19:06

You're looking for the x-cloak directive.

It's a very simple one, it gets removed from the component when Alpine starts up.

So in your case you can add the following style (which will hide elements with the x-cloak attribute) and add x-cloak to your Alpine.js component (in this case the body).

<style>
[x-cloak] { display: none }
</style>
<body x-cloak x-data="{openModal: false}"
 :class="openModal ? 'overflow-hidden' : 'overflow-visible'"
>

// button
<button @click="openModal = true">
Open Modal
</button>
<!-- Modal -->
<div x-show="openModal">
<!-- content --> 
</div>
</body>

Maik Lowrey On 08 January 2021 at 15:50

x-cloak is the right answear! But to be on the safe side in more cases, use the css important rule.

<style>
  [x-cloak] { 
      display: none !important;
   }
</style>

Allan Dereal On 29 November 2022 at 10:28

Apart from the x-clock solution, another solution is to wrap the content you want to control in a <template> tag with an x-if="true" parameter.
Check the code below.

<template x-if="true">
  <div x-show="openModal">
    <!-- content --> 
  </div>
</template>

This works because <template> elements are "hidden" in browsers by default, you won't see the <div> until Alpine has had a chance to render the x-if="true" and show it as the docs describe here

jvieyra On 25 March 2024 at 20:51

In my laravel project I added this code into resources/css/app.css

  [x-cloak] {
    display: none !important;
   }

Then in my div with Alpine.js asigned x-cloack property:

<div x-data="{ showModal: false }" x-cloak>
</div>

It works! Thanks

How to prevent alpine.js modal from showing every time i refresh the page

There are 4 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ALPINE.JS

Trending Questions

Popular # Hahtags

Popular Questions