Hallo zusammen,
ich versuche mich gerade an eine CSS Message Box.
Folgendes CSS:
.msgbox {
display: none;
position: absolute;
top: 100px;
left: 200px;
width: 20em;
background-color: #b00;
border: 1px solid #333;
color: #fff;
font-weight: bold; }
.msgbox p {
margin: 0;
padding: 5px 10px; }
.msgbox a.close {
float: right;
text-decoration: none;
font-weight: bold;
color: #333;
background-color: #fff;
border-left: 1px solid #333;
border-bottom: 1px solid #333;
padding: 0 4px;
margin-left: 5px; }
Auf der Seite wird ein Div platziert.
<div id="message-1" class="msgbox">
<a href="#" class="close"
onclick="closeBox('message-1'); return false;"
title="Close This">X</a>
<p>THIS IS MY MESSAGEs </p>
Der Javascript Code dazu um die Box zu laden und zu schließen:
function closeBox(toClose) {
document.getElementById(toClose).style.display = "none";
}
function loadMsg(msgClass) {
msg = document.getElementsByTagName("div");
for (i=0; i<msg.length; i++) {
if(msg[i].className == msgClass) {
msg[i].style.display = "block";
}
}
}
Soweit klappt alles. Mit
loadMsg('msgbox');
erscheint die Meldung "THIS IS MY MESSAGEs" und mit einem Click auf X wird sie geschlossen.
Jetzt würde ich aber gerne unterschiedliche Meldungen ausgeben, also keinen fixen Text im Div. Daher dachte ich, man könnte einfach der Funktion den gewünschten Text übergeben.
Also loadMsg('msgbox','Induvisueller Text');
Und dann in der Funktion mit "innerHTML" den Text ausgeben. AUch das klappt noch. Das Problem ist aber, daß einfach nicht mehr das "X" in der MsGbox erscheint. Man kann also die Meldung nicht mehr schließen.
Ich habe es auch versucht mit zusätzlichem "<p>" aber auch das brachte keine Änderung.
function loadMsg(msgClass,text) {
msg = document.getElementsByTagName("div");
for (i=0; i<msg.length; i++) {
if(msg[i].className == msgClass) {
msg[i].style.display = "block";
//msg[i].innerHTML = "<p>" + text + "</p>";
msg[i].innerHTML = text ;
}
}
}
Warum geht das so nicht und nur mit fixem Text im Div?
Wie könnte man das ändern?
vielen Dank und viele Grüße
hawk