带用户选择记忆功能模态框的实现与弹窗逻辑修复

你现有代码重定向逻辑正常，但模态框失效是几个低级错误导致的：

• 全局位置的JS代码在DOM还没加载完成时就执行，拿不到#remember等页面元素，直接触发null错误，阻断后续所有JS运行，模态框自然弹不出来
• 存在拼写错误、未定义变量问题：比如把Status拼写成Ststus，判断逻辑里直接用未定义的remember变量，直接抛引用错误中断代码
• 「记住我」逻辑缺失：用户取消勾选时没有清空之前存的选择，下次访问还是会读旧值，等于不记住的功能没生效
• 代码结构碎片化，jQuery的ready函数头被HTML的p标签拆分，很容易出现执行顺序异常
• 遮罩层写死宽高、用普通定位，很容易出现遮罩盖不全、被页面其他元素挡住的问题

HTML部分 #

<div id="boxes">
  <div style="top: 199.5px; left: 551.5px; display: none; position:fixed; z-index:1000; background:#fff; padding:20px; border-radius:4px;" id="dialog" class="window"> 请选择访问身份
    <div id="lorem" style="text-align:center">
      <form name="form1">
        <select onchange="formChanged(this);" name="user" size="1">
          <option value="non-value">请做出选择</option>
          <option value="/other-page">选项A（跳转至站点其他页面）</option>
          <option value="fa">选项B（留在当前页面）</option>
        </select>
        <br>
        <input type="checkbox" id="remember" checked />记住我的选择
      </form>
    </div>
  </div>
  <div style="width: 100%; font-size: 32pt; color:white; height: 100vh; display: none; opacity: 0.8; background:#000; position:fixed; top:0; left:0; z-index:999;" id="mask"></div>
</div>

注：给弹窗加了固定定位、高z-index和基础样式，避免被页面其他元素遮挡；遮罩层改成fixed定位、宽高100%，解决屏幕尺寸变化、滚动时遮罩盖不全的问题

JS部分（需提前引入jQuery，所有DOM相关逻辑放在加载完成回调内执行） #

$(document).ready(function() {
  const $rememberEl = $('#remember');
  const $dialog = $('#dialog');
  const $mask = $('#mask');

  // 初始化记住我复选框状态
  const rememberStatus = localStorage.getItem('remember');
  // 无存储记录默认勾选，有记录按存储值设置
  $rememberEl.prop('checked', rememberStatus === null ? true : rememberStatus === 'true');

  // 绑定记住我复选框事件
  $rememberEl.on('click', function() {
    const isChecked = $(this).is(':checked');
    localStorage.setItem('remember', isChecked);
    // 取消勾选时直接清空已存的用户选择，避免下次访问读取旧值
    if (!isChecked) {
      localStorage.removeItem('user');
    }
  });

  // 校验已存储的用户偏好
  const savedUser = localStorage.getItem('user');
  if (savedUser && $rememberEl.is(':checked')) {
    // 已记住选择跳转的，直接跳走
    if (savedUser !== 'fa' && savedUser !== 'non-value') {
      window.location.href = savedUser;
      return;
    }
    // 已记住选择留站的，直接不弹模态框
    if (savedUser === 'fa') {
      return;
    }
  }

  // 无有效记住偏好时才弹出模态框
  const maskHeight = $(document).height();
  const maskWidth = $(window).width();
  $mask.css({'width':maskWidth,'height':maskHeight});
  
  // 遮罩淡入效果
  $mask.fadeIn(500); 
  $mask.fadeTo("slow",0.8);  

  // 弹窗居中定位
  const winH = $(window).height();
  const winW = $(window).width();
  $dialog.css('top',  winH/2 - $dialog.height()/2);
  $dialog.css('left', winW/2 - $dialog.width()/2);
  // 弹窗淡入
  $dialog.fadeIn(200);     
});

// 选择框变更逻辑，挂全局保证onchange能正常调用
function formChanged(form) {
  const val = form.options[form.selectedIndex].value;
  const isRemember = $('#remember').is(':checked');
  if (val === 'non-value') return;

  // 仅勾选记住我时才存储选择，否则不存
  if (isRemember) {
    localStorage.setItem('user', val);
  } else {
    localStorage.removeItem('user');
  }

  // 选跳转选项直接跳转
  if (val !== 'fa') {
    window.location.href = val;
    return;
  }

  // 选留站选项关闭模态框，恢复页面访问
  $('.window').hide();
  $('#mask').hide();
}

• 所有DOM操作、元素获取全部放在$(document).ready回调内执行，保证页面元素加载完成后再运行逻辑，从根源避免找不到元素的报错
• 修正了所有拼写错误、未定义变量问题，统一用jQuery方法操作元素属性，减少原生JS和jQuery混写的兼容问题
• 完善记住我逻辑：只有勾选状态下才存储用户选择，取消勾选立刻清空已存记录，保证下次访问必然重新弹出选择框
• 页面加载优先校验已存偏好：记住跳转就直接跳走，记住留站就不弹框，无有效偏好才触发模态框展示

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