JS/CSS - 在网页上为 JS 禁用用户显示半透明层

发布于 2024-12-06 08:19:12 字数 617 浏览 0 评论 0原文

我的描述


我有一个严重依赖 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

等风来 2024-12-13 08:19:12

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

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

Add the layer in a noscript tag, and style the noscript tag, add your text in the noscript tag.

#noscript {top:0; left:0; height:100%; width:100%; opacity: 0.5; background: white;}
暮色兮凉城 2024-12-13 08:19:12

这听起来像是一个可行的解决方案。

隐藏图层非常简单。

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

设置图层使其看起来正确才是真正的工作所在。

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.

漆黑的白昼 2024-12-13 08:19:12

将禁用警告的 HTML 标记放入 标记中,然后根据需要设置样式。

W3Schools

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

W3Schools

尘世孤行 2024-12-13 08:19:12

处理此类事情的常见技术(Modernizr 使用这种方法)是执行如下操作。

在你的 CSS 中开始......

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

然后,在你的 JS 中......

$('html').addClass('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...

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

Then, in your JS...

$('html').addClass('js');
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文