網友打開網站進入網頁時，彈出溫馨提醒內容的通知窗口，以用作提示、警示或展示內容，給來訪者閱讀，信息也將會在一定時間內自動消失，如: 3秒、5秒、10秒後，自動隱藏信息，也可以在 form 標籤，點擊提交按鈕 Submit 時，延遲截入內容，設定停留的時間長一些，這時出現動畫、影片或圖片特效，在一定的時間又會自動關閉。

01. CSS

我們可以使用 CSS 3 的 animation 屬性和 @keyframes 規則來實現，彈出通知提示。

CSS 代碼:

.moonlol{
width: 150px;
height: 100px;
opacity: 0;
background: yellow;
animation-name: fadenum;
animation-duration: 3s;
}

@keyframes fadenum{
0%{opacity:1;}
99%{opacity:1;}
100%{opacity:0;}
}

animation-duration: 3s 代表 3秒 後信息自動隱藏。

HTML 代碼:

<div class="moonlol">提示!通知!溫馨提醒內容</div>

02. JS

使用 JavaScript 點擊物件在自定時間顯示或隱藏信息。

JS 代碼:

function ShowNotice() {
  var popup = document.getElementById("moonlols");
  popup.style.display = "block";
  setTimeout(function() {
    CloseNotice();
  }, 5000);
}

function CloseNotice() {
  var popup = document.getElementById("moonlols");
  popup.style.display = "none";
}

其中 5000 是毫秒，即表示 5秒 後內容自動消失。

HTML 代碼:

<button onClick="ShowNotice()">顯示信息 01</button>
<br />
<br />
<form id="form">
<textarea></textarea>
<br />
<input type="submit" value="提交 02" onClick="ShowNotice()" />
</form>
<div id="moonlols" style="display:none;">
圖片 / 影片 / 動畫 / 文字
</div>

推薦:

在 FORM 提交內容的第二個 PHP 頁面，建議加入以下延遲載入頁面代碼，這樣在第一個頁面，顯示的提示信息，就會得到有效的延長。

<?php
sleep(5); // Submit After In 5 second
?>

03. JS

網站的重要通知，點擊按鈕後 2秒 關閉。

JS 代碼:

function SetNotice(){
	setTimeout(function(){
    document.getElementById("MyNotice").style.display="none";
	},2000);
}

HTML 代碼:

<div id="MyNotice">通知信息!!</div>
<button onclick="SetNotice()">關閉通知</button>

技術文檔:

01. CSS延遲hover消失時間

02. 計算秒數隱藏物件3秒後消失示意影片

03. 自動消失的彈窗

04. CSS怎麼讓動畫展現幾秒後消失

演示地址：ifreesite.com/allot

代碼測試：ifreesite.com/runcode.htm