JavaScript 系列三：練習1 ── alert 示警元件

by max002215

HTML

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

CSS

* {
  box-sizing: border-box;
  
}
.alert {
  display: flex;
  width: 500px;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  height: 2.5rem;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 18px;
}
.alert-primary{
  background: #0080FF;
}
.alert-success{
  background: #01B468;
}
.alert-danger{
    background: #EA0000;

}
.alert-warning{
    background: #ffa500
;

}
.btn-close {
  background: #FFECEC;
  border: none;
  cursor: pointer;
  font-size: 24px;
  border-radius: 8px;

  &:hover {
    background-color: #FFF7FF;
  }
}

JavaScript

let closeButtons = document.querySelectorAll('.btn-close');
function removeAlert (){
event.target.closest('.alert').remove();
}
for(let close_Buttons of closeButtons){
close_Buttons.onclick = removeAlert}