Бутстрап тост остается на вершине (невидимый)

Question

A Тост Bootstrap не закрывается (с помощью кнопки закрытия) до того, как приложение будет «завершено» (перезагружено или при выходе из браузера).Когда приложение запускается снова, кнопки под «невидимым тостом» не могут быть использованы, хотя они видны.Таким образом, похоже, что тост «остается сверху», но невидим.

Решение проблемы - нажать кнопку, которая показывает тост, и закрыть тост.Теперь все кнопки кликабельны.

Bootstrap 4.3.1.Посылка используется.Может кто-нибудь объяснить, пожалуйста?

Answer 1

В вашей рабочей демонстрации я смог решить эту проблему, скрыв тост при загрузке страницы двумя из следующих способов (выберите один)

1) Вызовите jQuery hide() на странице готово:

$(document).ready(function(){
    // Hide the Toast
    $("#myToast").hide();

    $(".show-toast").click(function(){
        $("#myToast").toast('show');
    });
    $(".hide-toast").click(function(){
        $("#myToast").toast('hide');
    });
    $(".dispose-toast").click(function(){
        $("#myToast").toast('dispose');
    });
});

2) Добавьте класс hide к тосту:

<div class="toast hide" id="myToast" data-autohide="false" style="position: absolute; top: 0; right: 0;">

Вариант 2 чище.Но я понимаю, что класс hide устарел в начальной загрузке, поэтому используйте его на свой [будущий] риск.Это работает в вашей версии 4.3.1, так что ...