javascript - 如何通过单击第一页中的按钮来激活 Bootstrap 4 模式，将您重定向到激活模式的第二页？

Question

对于我的元素，我想实现 modal 。我正在使用 Bootstrap 4。该模式应按以下方式工作:

• 当我按下第一个 .html 页面中的按钮时，该按钮应将我重定向到第二个 .html 页面，同时在第二个 .html 页面中打开一个模式作为欢迎。

因此，这种情况下的模式就像弹出框一样的欢迎消息。

把事情说清楚。按钮“代码”位于第一个 .html 文件中，模式“代码”位于第二个 .html 文件中。

按钮:

<a href="index.html"><button class="btn btn-primary btn-lg btn-block text-uppercase" type="button"
        data-toggle="modal" data-target="#modalLogin">Prijavi se</button></a>

模态:

<div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLoginLabel">Pozdravljeni!</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Dobrodošli v digitalnem gradbenem delovnem listu.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Nadaljuj</button>
            </div>
        </div>
    </div>
</div>

我尝试了一切。从 id 到尝试重新定位代码，再到尝试使用 JavaScript 寻找另一个解决方案，但到目前为止还没有成功。

Answer 1

点击您的<a>无法在即将打开的另一个页面中打开模式。相反，您所做的是稍微修改 <a> 的 href ，例如:<a href="index.html/welcome"></a> .

然后，在您的 JS(正在加载 index.html )中，您可以检查当用户导航到该页面时您的 URL 中是否有“欢迎”。如果有，则触发模式显示。它看起来像这样:

$(document).ready(function() {
    if (window.location.href.indexOf("welcome") > -1) {
        $("#modalLogin").modal("show");
    }
});

这样，当用户导航到index.html时模式不会显示，但如果用户单击您的按钮，模式将显示，因为 URL 将包含 welcome .