toast notification over 'overlay'

Question

I know it's not what toastr (or toast notifs in general) are meant to be used for, but I want to use them as a modal notification. My idea is following.

On toast show:

toastr.options.onShown = function() { //Create an overlay on the entire page}

Overlay:

#overlay {
background-color: rgba(0, 0, 0, 0.8);
z-index: 999;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
}

And on toast close:

toastr.options.onHidden = function() { //make overlay go away }

Also, I'm setting timeout of toast to 0 so it won't disappear by itself.

Question: I want the toast notification to stay atop the overlay and not behind it as overlay will cover everything. How can I do it?

Answer 1

You are doing it right..

Just add

<div id="overlay"></div> in body somewhere. Add your required style in stylesheet.

In toastr.options.onShown callback, add show overlay $("#overlay").show(); and in toastr.options.onHidden callback hide it.. $("#overlay").hide();

Toaster has id toast-container which has z-index 999999. So in order to move overlay below toastr, set z-index below 999999.. Which is the default case in your stylesheet..

You should be good to go :-)