时间戳

首页 > 解决方案 > 如何通过单击第一页中的按钮来激活 Bootstrap 4 模态，将您重定向到激活模态的第二页？

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

问题描述

对于我的项目，我想实现一个modal。我正在使用Bootstrap 4。模态应按以下方式工作：

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

把事情说清楚。按钮“代码”在第一个 .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 找到另一个解决方案，但到目前为止还没有运气。

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

解决方案

单击您<a>无法在即将打开的另一个页面中打开模式。相反，您所做的是稍微修改您的 href <a>，例如：<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.

推荐阅读