如何点击第一页按钮跳转至第二页并自动激活Bootstrap 4模态框？

问题的核心在于：你原来按钮上的data-toggle和data-target属性是针对当前页面的DOM元素生效的，当跳转到新页面后，原页面的DOM已被销毁，这些属性无法作用到第二页的模态框上。我们需要在第二页加载完成后，主动触发模态框的显示。

步骤1：修改第一页的跳转按钮 #

去掉按钮上的data-toggle和data-target属性（它们对跨页面跳转无效）。如果需要仅从第一页跳转时才弹出模态框，可以给跳转URL添加一个参数标记：

<a href="index.html?showWelcomeModal=true">
  <button class="btn btn-primary btn-lg btn-block text-uppercase" type="button">Prijavi se</button>
</a>

如果希望只要打开第二页就显示模态框，直接保留普通跳转链接即可，不需要添加URL参数。

步骤2：在第二页添加触发模态框的JavaScript #

在第二页的</body>标签前，添加以下脚本（确保已经引入jQuery和Bootstrap 4的JS文件）：

情况1：仅从第一页跳转时显示模态框（通过URL参数判断） #

$(document).ready(function() {
    // 解析URL中的参数
    const urlParams = new URLSearchParams(window.location.search);
    const shouldShowModal = urlParams.get('showWelcomeModal');
    
    // 如果参数存在且为true，触发模态框
    if (shouldShowModal === 'true') {
        $('#modalLogin').modal('show');
    }
});

情况2：只要加载第二页就显示模态框 #

如果不需要限制来源，直接在页面加载完成后触发：

$(document).ready(function() {
    $('#modalLogin').modal('show');
});

步骤3：确认依赖文件 #

确保第二页已经正确引入Bootstrap 4所需的依赖：

<!-- 必须先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<!-- 引入Bootstrap 4的JS文件（包含Popper.js） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

为什么之前的方法无效？ #

• 迁移代码：把模态框移到第一页的话，跳转后模态框会留在原页面，不符合你要在第二页显示的需求；
• 调整ID：ID正确但跨页面的data-*属性无法跨DOM环境生效；
• 未正确触发：必须在新页面的DOM加载完成后，使用Bootstrap的模态框API主动调用显示方法。

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