Ich versuche, Pop-up-Meldungen hinzuzufügen, die verschiedene Aktionen bestätigt, indem Sie ein wenig nach oben bewegen und dann verschwinden. Ich benutzen CSS3-Animationen das erreichen:Hinzufügen von animierten verschwinden Text, ohne neue Zeile hinzufügen
#message-boxOK {
width: 200px;
background-color: #80b95c;
position: relative;
float: middle;
padding: 10px 10px;
text-align: center;
border-radius: 5px;
margin: 0 auto;
-webkit-animation-name: rise; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-name: rise;
animation-duration: 2s;
}
/* Standard syntax */
@keyframes rise {
0% {bottom:25px;}
100% {bottom:100px;}
}
Und ich verwenden JavaScirpt diese Nachrichten zu starten:
function messageBox(message,type) {
if(type=="ok"){
document.getElementById("dump-message").innerHTML ="<div id='message- boxOK'>"+message+"</div>";
setTimeout("document.getElementById('message-boxOK').remove()",1900);
}
else {
document.getElementById("dump-message").innerHTML ="<div id='message-box'>"+message+"</div>";
setTimeout("document.getElementById('message-box').remove()",1900);
}
} `
Aber wenn JS fügt eine neue div mit der Meldung, um eine neue Zeile erscheint in Dokument- und anderen Inhaltsbewegungen. Wenn es wieder entfernt wird, verschwindet die Zeile und andere Inhalte werden verschoben.
Also, wie könnte ich diese Animation auf andere Inhalte machen, ohne dass es sich bewegt. Ich brauche diese Nachricht irgendwo in der Mitte des Dokuments. Oder vielleicht gibt es eine Art von anderem Weg oder Plug-in, um temporäre Pop-ups anzuzeigen.
versuchen 'Position mit: absolute', wie ich Ihnen raten, Elemente für das Layout sind schwebend. – jbutler483
Es ist nicht 100% notwendig, basierend auf Ihrer guten Erklärung des Problems, aber wenn Sie ein Schnipsel (verwendbares Beispiel) zur Verfügung gestellt haben, erhalten Sie wahrscheinlich eine bessere Qualität Antwort schneller :) – wahwahwah