Как активировать модальный режим Bootstrap 4, нажав кнопку на первой странице, которая перенаправит вас на вторую страницу с активированным модалом? - PullRequest
Новая
       4

Как активировать модальный режим Bootstrap 4, нажав кнопку на первой странице, которая перенаправит вас на вторую страницу с активированным модалом?

2 голосов
/ 28 февраля 2020

Для моего проекта я хочу реализовать модальный . Я использую 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>

Я все перепробовал. от идентификаторов до попыток переместить код, попытаться найти другое решение с JavaScript, но пока безуспешно.

1 Ответ

2 голосов
/ 28 февраля 2020

Клик по вашему <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.

...