Ruby on Rails登录页添加功能公告弹窗问题求助

1. 补全完整的Modal HTML结构 #

你现在的代码只包含Modal的内部组件，缺少Bootstrap Modal必需的外层容器结构。把以下代码替换你现有的内容，放在app/views/login.html.erb中：

<!-- 公告弹窗 -->
<div class="modal fade" id="announcementModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">功能公告</h4>
      </div>
      <div class="modal-body">
        <p>这里填写应用最新变更内容，比如：</p>
        <ul>
          <li>新增短信验证码登录选项</li>
          <li>优化登录页面响应速度</li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">知道了</button>
      </div>
    </div>
  </div>
</div>

2. 添加自动触发弹窗的JS逻辑 #

在login.html.erb文件末尾添加script标签，实现页面加载完成后自动弹窗，同时加入本地存储逻辑，避免用户重复看到相同公告：

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // 检查浏览器本地存储，判断是否已显示过该公告
    const hasSeenAnnouncement = localStorage.getItem('seenAnnouncement');
    if (!hasSeenAnnouncement) {
      $('#announcementModal').modal('show');
    }

    // 用户点击"知道了"后，标记已查看
    $('#announcementModal .btn-primary').on('click', function() {
      localStorage.setItem('seenAnnouncement', 'true');
    });
  });
</script>

3. 确认Bootstrap资源已正确引入 #

由于你使用的是Bootstrap风格的Modal，需确保项目已引入Bootstrap的CSS和JS：

• 若使用gem管理：在app/assets/stylesheets/application.css添加 @import "bootstrap";；在app/assets/javascripts/application.js添加 //= require bootstrap
• 若用CDN快速测试：在app/views/layouts/application.html.erb的<head>中加入：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

关键注意点 #

• Bootstrap Modal必须包含.modal、.modal-dialog、.modal-content三层容器，否则无法被正确识别渲染
• 若不需要记忆用户是否查看过公告，直接删除localStorage相关代码即可
• 弹窗的显示时机是页面DOM加载完成后，符合登录页自动弹出的需求

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