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