how do i add a javascript disabled overlay on my site

Question

i am trying to make a site where when javascript turns off it will display an overlay. and then put the website unusable until js is turned back on, using .

i have tried just

<noscript><h1>turn javascript on to use this site</h1></noscript>

this code and it just displays it side by side my code and does not make my site unusable until they turn on javascript like i want. if anyone can provide a code snippet or explain this i would appreciate it

Answer 1

you are at the right path, just add some CSS into it to block the view.

Something like this would help

.blocker {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.blocker>.content {
  background: #fff;
  width: fit-content;
  margin: 0 auto;
  max-width: 300px;
  font-size: 2rem;
  padding: 1rem;
  text-align: center;
}

<div>
  SOME OTHER TEXT Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur, hic impedit fugiat iusto voluptate ratione, quo, alias deleniti illo rerum officiis? Ab fuga ipsa libero aut facilis molestiae voluptatibus, perspiciatis repellat
  magnam consequuntur assumenda atque ullam officiis. Quos, incidunt vel. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur, hic impedit fugiat iusto voluptate ratione, quo, alias deleniti illo rerum officiis? Ab fuga ipsa libero
  aut facilis molestiae voluptatibus, perspiciatis repellat magnam consequuntur assumenda atque ullam officiis. Quos, incidunt vel.
</div>


<div class="blocker">
  <div class="content">
  turn javascript on to use this site
  </div>
</div>

you should put <noscript> tag around the .blocker div like this

<noscript>
  <div class="blocker">
    <div class="content">
      turn javascript on to use this site
    </div>
  </div>
</noscript>