Show a nice alertbox

example.html

<script src="message.js">
<link rel="stylesheet" type="text/css" href="message.css">
<button onclick="shomess("info","your message")">info</button>
<button onclick="shomess("warn","your message")">warn</button>
<button onclick="shomess("error","your message")">error</button>

message.css

#mes {
    position: fixed;
    border-radius: 3px;
    padding: 10px;
    background: rgba(213, 213, 213, 0.97);
    display: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}
.circle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 47px;
    text-align: center;
    font: 42px Arial, sans-serif;
    font-weight: bolder;
}
.info {
    border: 6px solid #0db00d;
    color: #0db00d;
}
.warn {
    border: 6px solid #ffce00;
    color: #ffce00;
}
.error {
    border: 6px solid red;
    color: red;
}
#mes-h {
   margin-top: -12px;
    text-align: center;
    color: black;
}

#mes-btn {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    width: 100%;
}
#mes-txt {
    text-align: center;
    font-size: 20px;
    color: black;
}

.center {
   /*margin: auto;*/
    display: block;
    margin-left: auto;
    margin-right: auto
}

message.js

var mes = document.getElementById("mes");
function  load() {
    var h1= document.createElement("h1");
    h1.id= "mes-h";
    var micon = document.createElement("div");
    micon.id="mes-icon";
    var mtxt = document.createElement("p");
    mtxt.id="mes-txt";
    var mbtn = document.createElement("button");
    mbtn.id="mes-btn";
    mbtn.type="button";
    mbtn.innerText="Okay";
    mbtn.style="color: black;";
    mbtn.setAttribute("onClick", "cls()");
    mes.appendChild(h1);
    mes.appendChild(micon);
    mes.appendChild(mtxt);
    mes.appendChild(mbtn);
}
load();
var text = document.getElementById("mes-txt");
var icon = document.getElementById("mes-icon");
var btn = document.getElementById("mes-btn");
var h = document.getElementById("mes-h");
var list = null;
var clist2 = null;

function cls(){
    mes.style.display = "none";
}

function showmes(type, txt){
    list = mes.classList;
    clist2 = icon.classList;
    mes.classList.remove(list);
    mes.classList.add(type);
    icon.classList='';
    //icon.classList.remove(clist2);
    icon.classList.add(type);
    icon.classList.add("circle");
    icon.classList.add("center");
    switch(type){
        case "warn":
            btn.style.backgroundColor ="#ffce00";
            h.innerHTML="Warnung";
            icon.innerHTML="!";
            break;
        case "error":
            btn.style.backgroundColor ="red";
            h.innerHTML="Fehler";
            icon.innerHTML="X";
            break;
        default:
            btn.style.backgroundColor ="#0db00d";
            h.innerHTML="Info";
            icon.innerHTML="i";
            break;
    }
    text.innerHTML=txt;
    mes.style.display= "block";
}