JS/CSS - 在网页上为 JS 禁用用户显示半透明层
我的描述
我有一个严重依赖 Javascript 和 JQuery 的网站应用程序。如果用户在浏览器设置中禁用了 JS,则网站将无法正常运行,尽管它仍然可以运行。
我想阻止人们看到我禁用了 JS 的网站,但又不将他们重定向到非 javascript 页面。我想提醒我的用户应该在良好呈现的 CSS 方法中启用 JS。
如果禁用 JS,我想显示一个半透明/白色的 CSS 层,显示在我的网页顶部,宽度为 100%,高度为 100%,并用一些客气的话向我的用户描述问题,以及可能的启用 JS 的说明。
我的计划
- 使用半透明 CSS 层 100% x 100% 覆盖我的网页,位于 每一页。
- 有一个加载 Javascript 函数,当页面加载时,它 删除该层。所以如果没有找到Javascript,就不会 删除该层。
我的问题
这是实现这一目标的最佳方法吗?如果是,您能帮助我使用关闭 CSS 层、加载的 Javascript 函数吗?或者向我解释一下该函数应包含哪些内容才能实现此功能?我的 JavaScript 很糟糕...
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...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
在 noscript 标签中添加图层,并设置 noscript 标签的样式,在 noscript 标签中添加文本。
Add the layer in a noscript tag, and style the noscript tag, add your text in the noscript tag.
这听起来像是一个可行的解决方案。
隐藏图层非常简单。
设置图层使其看起来正确才是真正的工作所在。
That sounds like a workable solution.
Hiding the layer is pretty simple.
Setting up the layer so it looks right is where the work really is.
将禁用警告的 HTML 标记放入
标记中,然后根据需要设置样式。
W3Schools
Put your HTML markup for the disabled warning in the
<noscript>
tag, then style as desired.W3Schools
处理此类事情的常见技术(Modernizr 使用这种方法)是执行如下操作。
在你的 CSS 中开始......
然后,在你的 JS 中......
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...
Then, in your JS...