新しい行を追加せずにアニメーション消滅テキストを追加する方法

Question

ポップアップメッセージを追加しようとしています。さまざまなアクションを確認しています。少し上に移動して表示されて消えてしまいます。

#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;} 
} 

そして私は、これらのメッセージを開始するJavaScirptを使用：：私はそれを達成するためにCSS3アニメーションを使用

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); 
} 

} `

をしかし、JSは、メッセージを使用して、新規のdiv、新しい行を追加する場合ドキュメントや他のコンテンツの動きに表示されます。もう一度削除すると、行が消え、他のコンテンツが移動します。

どのように私はこのアニメーションを移動せずに他のコンテンツの上に表示することができますか？私は文書の途中でそのメッセージが必要です。あるいは、一時的なポップアップを表示するために他の方法やプラグインから何らかの種類があるかもしれません。

Answer 1

position: absoluteがこちらになります。

絶対配置では、要素がドキュメントのフローから完全になくなり、メッセージが表示されて消えたときに他のコンテンツに影響を与えません。対照的に浮動小数点要素は依然としてドキュメントフローの一部であり、その結果、外観/消失に関して表示される内容がシフトします。私はあなたがレイアウトの要素を浮動している推測しているとして、absolute`：

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); 
 
    } 
 
} 
 

 
messageBox('Passing by!', 'ok');

*, :before, :after { 
 
box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.bg-top { 
 
background: red; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
.bg-bottom { 
 
background: blue; 
 
    width: 100%; 
 
    height: 50px; 
 
} 
 

 
#dump-message { 
 
    margin-top: 100px; 
 
} 
 

 
#message-boxOK { 
 
    width: 200px; 
 
    background-color: #80b95c; 
 
    position: absolute; 
 
    left: 50%; 
 
    margin-left: -100px; 
 
    padding: 10px; 
 
    text-align: center; 
 
    border-radius: 5px; 
 
    
 
    -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; 
 
    } 
 
}

<div class='bg-top'></div> 
 
<div id='dump-message'></div> 
 
<div class='bg-bottom'></div>