如何实现JavaScript禁用时的网站遮罩层，使网站无法使用？

核心思路 #

默认显示全屏遮罩层并隐藏网站内容，当JavaScript启用时，通过代码隐藏遮罩层、展示正常内容；若JS禁用，遮罩层保持显示，用户无法访问网站内容。

完整代码示例 #

HTML结构 #

<!-- JS禁用提示遮罩层 -->
<div id="js-disabled-overlay">
  <div class="overlay-content">
    <h1>请启用JavaScript以使用本网站</h1>
    <p>本网站的核心功能依赖JavaScript支持，请在浏览器设置中开启后刷新页面。</p>
  </div>
</div>

<!-- 网站主内容容器 -->
<div id="site-content">
  <!-- 这里放置你的网站所有内容 -->
  <h2>网站正常内容</h2>
  <p>只有启用JavaScript后才能看到这里的内容</p>
</div>

CSS样式 #

/* 遮罩层样式：全屏覆盖、层级最高 */
#js-disabled-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 遮罩层内的提示内容样式 */
.overlay-content {
  color: #fff;
  text-align: center;
  padding: 2rem;
  max-width: 600px;
}

/* 默认隐藏网站主内容，JS启用后再显示 */
#site-content {
  display: none;
}

JavaScript代码 #

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const overlay = document.getElementById('js-disabled-overlay');
  const siteContent = document.getElementById('site-content');
  
  // 隐藏遮罩层，显示网站内容
  overlay.style.display = 'none';
  siteContent.style.display = 'block';
});

关键说明 #

• 遮罩层使用position: fixed确保始终覆盖视口，z-index: 9999保证不会被其他页面元素遮挡。
• 网站内容默认设置为display: none，只有JS运行后才会展示，彻底避免JS禁用时用户看到内容。
• 可以根据网站风格调整遮罩层的背景色、提示文字样式，比如更换背景图、调整字体大小等。

内容的提问来源于stack exchange，提问作者aaron