alert UI

by dfg312546

HTML

<div class="alert alert-primary">
  歡迎您點擊「抖內」按鈕，以實際行動支持我們。
  <button onclick="closeAlert()" class="btn-close">×</button>
</div>
<hr>
<div class="alert alert-success">
  您已成功下訂單！以下為您的訂單詳細資訊。
  <button onclick="closeAlert()" class="btn-close">×</button>
</div>
<hr>
<div class="alert alert-danger">
  抱歉，系統發生錯誤，請稍後重新嘗試。
  <button onclick="closeAlert()" class="btn-close">×</button>
</div>
<hr>
<div class="alert alert-warning">
  請注意，以下內容包含「劇透」爆雷資訊。
  <button onclick="closeAlert()" class="btn-close">×</button>
</div>

CSS

.alert.alert-primary{
  text-align: center;
  border-radius:5px;
  padding:10px;
  background-color:#6495ED;
  color:#002FA7
}

.alert.alert-success{
  text-align: center;
  border-radius:5px;
  padding:10px;
  background-color:#9ACD32;
  color:#006400;
}

.alert.alert-danger{
  text-align: center;
  border-radius:5px;
  padding:10px;
  background-color:#F08080;
  color:#8B0000;
}

.alert.alert-warning{
  text-align: center;
  border-radius:5px;
  padding:10px;
  background-color:	#FFBF00;
  color:#704214;
}

.btn-close{
  border-width: thin;
  border-radius:5px;
  background-color:white;
  float: right;
}

.btn-close:hover{
  color:white;
  background-color:black;
}

JavaScript

function closeAlert() {
	event.currentTarget.parentElement.remove();
}