如何通过JavaScript永久关闭Bootstrap模态框并利用localStorage记录状态？

你的思路方向是对的，但有几个细节需要调整，才能正确实现点击按钮后永久关闭弹窗的需求：

问题分析 #

1. 直接用toggleClass("d-none")会忽略localStorage的状态逻辑，不管用户是否标记过“已看过”，都会切换显示状态，逻辑有误。
2. Bootstrap模态框有官方的JS控制方法，直接操作d-none类可能会破坏模态框的动画效果和遮罩层行为。

修正后的代码 #

JavaScript部分 #

$(function() {
    // 页面加载时，检查localStorage：无记录则显示模态框
    if (!localStorage.getItem("modal")) {
        $('#exampleModal').modal('show');
    }

    // 点击「不再显示此弹窗」按钮
    $(".modal_close").on("click", function() {
        localStorage.setItem("modal", "seen");
        $('#exampleModal').modal('hide');
    });

    // 原生关闭按钮（×）仅关闭弹窗，不记录状态
    $(".close[data-dismiss='modal']").on("click", function() {
        $('#exampleModal').modal('hide');
    });
})

HTML部分（仅微调细节） #

Bootstrap的modal类默认是隐藏状态，无需额外加d-none，保持原有结构即可，同时修正按钮光标样式：

<div class="modal fade" style="background: rgba(0, 0, 0, 0.548);" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content animate-grad text-white">
            <div class="modal-header text-center">
                <h5 class="modal-title" style="text-align: center;" id="exampleModalLabel"><strong>{{follow_us.title}}</strong></h5>
                <p style="border-top: 1px solid white;"></p>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            {% if follow_us.content %}
            <div class="modal-body">
                <p>{{ follow_us.content }}</p>
            </div>
            {% endif %}
            <div class="modal-footer w-100">
                <a style="cursor: pointer;" class="modal_close"> Do not show this again.</a>
            </div>
        </div>
    </div>
</div>

关键调整点 #

• 使用Bootstrap官方的modal('show')/modal('hide')方法控制弹窗，确保动画和遮罩层正常工作。
• 初始判断逻辑改为：仅当localStorage中无modal记录时，才自动弹出模态框。
• 点击「不再显示」按钮时，先写入localStorage标记状态，再关闭弹窗。
• 修正cursor: none为cursor: pointer，让按钮呈现可点击的视觉反馈。

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