ngToast message is displaying behind the modal popup

Question

I am using the ngToast to display the success messages in angularJs, but success message is displaying behind the modal popup.

How can I display the ngToast message on top of the Modal Popup?

Answer 1

Add the following to your CSS:

toast {
  z-index: 7000;
}

Bootstrap modal has a z-index of 1040, so anything above that should make the toast message appear over the modal.

Answer 2

Check the z-index of your modal by inspecting modal element( eg: if it is 1050). add any value above this index to your toast will work

toast {
 z-index: 1051
}

Answer 3

Add the toast within a div. and for the parent div of toast, add z-index

in my case I've done like this

    <div class="position-fixed top-0 end-0 p-3" style="z-index: 1090">
        <div id="liveToast" class="toast hide align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
            <div id="error">
                <div class="d-flex">
                    <div class="toast-body" id="error_msg">
                        Hello, world! This is a toast message.
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
            <div id="succes">
                <div class="d-flex">
                    <div class="toast-body" id="success_msg">
                        Hello, world! This is a toast message.
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        </div>
    </div>

Answer 4

EDITED:

I've found the solution. In my case I had to use a huge number for z-index, but also I had to use in other css class, as follows:

.ng-toast {
  z-index: 100000; // I don't have any ideia why, but worked! 
}

Answer 5

Check your modal z-index. And check your toastr z-index. Anything appearing on modal should have a higher z-index than modal z-index.

if your modal z-index is 999

.modal { z-index: 999 }

toastr z-index should be anything above 999

Answer 6

Try This

#toast-container {
z-index: 9999999;
}