Bootstrap toast remains on top (invisible)

Question

A Bootstrap toast is not closed (using the close button) before the app is "finished" (reloaded or at browser exit). When the app is started again the buttons under the "invisible toast" cannot be used although they are visible. So it looks like the toast "stays on top" but is invisible.

The solution to the problem is to click the button that shows the toast and close the toast. Now all buttons are clickable.

Bootstrap 4.3.1. Parcel is used. Can someone please explain?

Answer 1

In your working demo, I was able to solve this by hiding the toast on page load in both of the following ways (pick one)

1) Call jQuery hide() on page ready:

$(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) Add the hide class to the toast:

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

Option 2 is cleaner. But I understand that the hide class is deprecated in bootstrap, so use at your own [future] risk. It does work in your version 4.3.1, though, so...