JS/CSS - Show semi-transparent layer over webpage for JS disabled users

Question

My Description

---

I have a website application that relies heavily on Javascript and JQuery. If the user has JS disabled in their browser settings, the website does not function as well as it should, although it still works.

I would like to stop people seeing my website that have JS disabled, but without redirecting them to a non-javascript page. I would like to alert my user that JS should be enabled in a well presented CSS method.

If JS is disabled, I would like to show a semi-transparent/white CSS layer, displayed on top of my webpage with a width of 100% and a height of 100%, with some kind words to describe the issue to my user, and possibly instructions to enable JS.

My Plan

---

• Have a semi-transparent CSS layer 100% x 100% to cover my webpage, on every page.
• Have an on-load Javascript function, that when the page loads, it removes the layer. So if there is no Javascript found, it won't remove the layer.

My Question

---

Is this the best way to accomplish this? If it is, can you help me with the Javascript function that would close the CSS layer, on-load, or explain to me what the function should include to make this work? My Javascript sucks...

Answer 1

在noscript标记中添加图层，并设置noscript标记的样式，在noscript标记中添加文本。

#noscript {top:0; left:0; height:100%; width:100%; opacity: 0.5; background: white;}

Answer 2

That sounds like a workable solution.

Hiding the layer is pretty simple.

$(function () {
    $("#layerId").hide();
});

Setting up the layer so it looks right is where the work really is.

Answer 3

Put your HTML markup for the disabled warning in the <noscript> tag, then style as desired.

W3Schools

Answer 4

A common technique for this kind of thing ( Modernizr uses this approach) is to do something like the following.

Start with this in your CSS...

#my-warning-message {display:block; width:...}
.js #my-warning-message {display:none;}

Then, in your JS...

$('html').addClass('js');