Created
March 3, 2020 18:16
-
-
Save Jo0001/cb3fcea7be4f260f3cc364e82f104ebb to your computer and use it in GitHub Desktop.
Show a nice alertbox
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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"; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment