数秒間表示ポップアップを表示します。数秒後に自動的に非表示になります。

表示ポップアップを何秒か表示します。何秒後に自動的に表示されません。数秒間表示ポップアップを表示します。数秒後に自動的に非表示になります。

CSSには何か方法がありますか？私はjavascriptでしたくないです。

2017-07-30 D. R.

あなたはCSSでそれをやりたいとJSはオプションではありませんか、それはCSSで最高のだろうと思いましたか？ – hansTheFranz

[アラートボックスを表示した後、自動的にアラートボックスを非表示にするにはどうすればいいですか？]（https://stackoverflow.com/questions/15466802/how-can-i-auto-hide-alert-box-after-it-showing -it） –

みんな、このポップアップをCSSで出したい。もし可能なら答えてください。 –

これを実現するには、CSSアニメーションを使用できます。

.popup { 
 
    /* apply 3 second hiding animation after 10 second delay */ 
 
    animation: hide 3s 10s forwards; 
 

 
    /* fix popup at the center of screen, optional style */ 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 

 
    padding: 20px; 
 
    /* dimming entire screen except popup */ 
 
    outline: 100vmax solid #ccc; 
 
} 
 

 
@keyframes hide { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    } 
 
}

<div class="popup"> 
 
    This is popup 
 
</div>

出典

2017-07-30 10:22:30

スニペットが私のために実行されていないし、あなたはボタンからポップアップを起動する方法を示していません。 –

@VanquishedWombatスニペットが実行中です（ '.popup'が非表示になるまでに10秒の遅延があります）。ボタンからポップアップを起動するには、基本的なJavaScript（いくつかの '：target'リンクや他のハッキングを除く）が必要です。私の答えは文字通り遅れてポップアップを表示して隠しています。 OPは、ボタンのやりとりや何らかのイベント後の表示については問いませんでした。 –

はい、あなたは私が同意する正しい答えを持っています。ただし、2秒の遅延を追加し、ポップアップを表示してから5秒後に非表示にすることをお勧めします。これはOPが彼が必要とするものを正確に与えるでしょう。 –

数秒間表示ポップアップを表示します。数秒後に自動的に非表示になります。

答えて

関連する問題