web前端：各種危險操作成功操作資訊提醒實戰案例

各種危險操作成功操作資訊提醒實戰案例， 主要是講資訊提醒， 然後使用者瞭解到是否成功或者是高危操作， 危險等等的資訊提醒！

要做這個其實不難， 但是也不簡單， 今天小編主要是以JavaScript來做， 這個提醒資訊是可以關掉的一個功能的資訊提醒！

那麼我們來看一下實例圖：

實例圖

實例圖中的各種提醒資訊都是可以關掉的， 那麼這個是怎麼做到的呢？

我們來看一下實例代碼：

HTML實例代碼：

提示資訊

點擊 "x" 關閉提示框。

CSS實例代碼：

.alert {

padding: 20px;

background-color: #f44336;

color: white;

opacity: 1;

transition: opacity 0.6s;

margin-bottom: 15px;}

.alert.success {background-color: #4CAF50;}

.alert.info {background-color: #2196F3;}

.alert.warning {background-color: #ff9800;}

.closebtn {

margin-left: 15px;

color: white;

font-weight: bold;

float: right;

font-size: 22px;

line-height: 20px;

cursor: pointer;

transition: 0.3s;}

.closebtn:hover {

color: black;}

JavaScript實例代碼：

var close = document.getElementsByClassName("closebtn");

var i;

for (i = 0; i < close.length; i++) {

close[i].onclick = function(){

var div = this.parentElement;

div.style.opacity = "0";

setTimeout(function(){ div.style.display = "none"; }, 600); }}