Search code examples
javascriptjquerycssjquery-uitoastr

toast notification over 'overlay'

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?

Solution

  • 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 :-)