Toast / send messages to users with no dependencies.

NativeToast.css

.toaster {
    font-family: inherit;
    display: none;
    background: lightblue;
    padding: 1rem;
    border-radius: 5px;
    max-width: 75%;
    margin: 0 auto;
    cursor: pointer;
}
.toaster > .t_type {
    font-size: 1.3rem;
    line-height: 1.7rem;
    padding-right: .25rem;
}
.toaster > .t_msg {
    font-size: 1rem;
    line-height: 2rem;
    padding-left: .35rem;
}

NativeToast.html

<div class="toaster">
    <span class="t_type"></span>
    <span class="t_msg"></span>
</div>

NativeToast.js

// jshint asi= true, esversion= 6, laxcomma= true
'use strict()'

function Toast() {

    const el = document.querySelector('.toaster')
        , type = el.querySelector('.t_type')
        , msg = el.querySelector('.t_msg')
        , show = el => el.style.display = 'flex'
        , hide = el => el.style.display = 'none'
        , closeOnClick = bool => bool 
        	? el.onclick = () => hide(el) 
        	: null
        , closeAuto = bool => bool 
        	? setTimeout(() => hide(el), 3500) 
        	: null
        , pop = (t, m) => {
            msg.textContent = m
            type.textContent = t
            show(el)
        };

    return {
        is: 'Native Toaster',
        pop,
        hide,
        closeAuto,
        closeOnClick
    }
}

const toast = new Toast()
toast.closeAuto(false)
toast.closeOnClick(true)
        
toast.pop('Success', 'Click to close the message')

console.log(toast.is)