SimpleToast

function toast(msg,duration=3000) {
    const dialog = document.createElement("dialog")
    dialog.classList.add("toast")
    dialog.classList.add("bold")
    dialog.classList.add("green")
    dialog.classList.add("pre")
    dialog.textContent = msg
    dialog.addEventListener("click",e => {
        e.preventDefault()
        dialog.close()
        dialog.remove()
    })
    document.body.append(dialog)
    dialog.showModal()
    setTimeout(_ => {
        dialog.close()
        dialog.remove()
    },duration)
}

dialog.toast {
    border: 2px solid black;
    font-size: 2rem;
    padding: 1.5rem;
    box-shadow: 1rem 1rem 1rem black; 
    width: 60vw;
    font-family: "Optima", sans-serif;
}
dialog.toast.bold {
    font-weight: bold;
}
dialog.toast.green {
    background-color: #070;
    color: white;
}
dialog.toast.pre {
    white-space: pre-wrap;
}