Show pop-up message if JavaScript is disabled in browser

If you're a web developer, then you know how important it is to make sure your website works properly for all visitors.

One common issue that can arise is when JavaScript has been disabled in the user's browser. This can cause some problems with certain features on your site, so it's important to inform users if they have JavaScript disabled and suggest ways they can re-enable it.

Fortunately, there are several easy solutions available using CSS and the <noscript> tag which allow you to display a popup message informing users of their need for JavaScript without disrupting their experience too much.

First off, create a div element with an ID attribute set as js-disabled.

<div id="js-disabled"> </div> 

Next add some styling information inside the style tags or into your external stylesheet.

<style>
  #js-disabled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ddd;
    padding: 10px;
  }

  #js-disabled p {
    font-size: 18px;
    text-align: center;
    padding-top: 100px;
  }

  #js-disable p strong {
    font-weight: bold;
  }
</style>

Next use the <noscript> tag within our HTML document along with our div element created earlier.

<noscript>
<style>
  #js-disabled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ddd;
    padding: 10px;
  }

  #js-disabled p {
    font-size: 18px;
    text-align: center;
    padding-top: 100px;
  }

  #js-disable p strong {
    font-weight: bold;
  }
</style>
 <div id="js-disabledy">
  <p>
    <strong>JavaScript must be enabled in order for this page function correctly.</strong>
  </p>
  Please enable Javascript by following instructions at <a href="#url">this link</a>.
 </div>
</noscript>

That should do it! Now whenever someone visits your site who doesn't have Javascript turned on they'll see something like this.