6

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?

YYY
  • 3,440
  • 5
  • 20
  • 24

6 Answers6

7

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.

Fissio
  • 3,748
  • 16
  • 31
1

Try This 

#toast-container {
z-index: 9999999;
}
Sava InfoSystems
  • 11
  • 1
  • 5
    Explainations are always important for answers. Please try to explain your answer and how you solved the issue. – L. Guthardt Feb 22 '18 at 15:13
1

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
}
Haseena P A
  • 16,858
  • 4
  • 18
  • 35
1

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

Niclausel
  • 139
  • 1
  • 3
0

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! 
}
Guilherme Gambeti
  • 49
  • 1
  • 8
0

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>
Chandan Kumar Panigrahi
  • 1
  • 1