JavaScript 系列三：練習1

alert 示警元件

by applelily

HTML

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Alert Button </title>
  <link rel="stylesheet" href="./js_button_alert.css">
</head>
<body>
  <div class="alert-container">
    <div class="alert alert-primary">
      💙 歡迎您點擊「抖內」按鈕，以實際行動支持我們。 
      <button class="btn-close" onclick="btn_close(this)" >×</button>
    </div>
    <hr>
    <div class="alert alert-success">
      ✅ 您已成功下訂單！以下為您的訂單詳細資訊。
      <button class="btn-close" onclick="btn_close(this)">×</button>
    </div>
    <hr>
    <div class="alert alert-danger"> 🚫 抱歉，系統發生錯誤，請稍後重新嘗試。
    
      <button class="btn-close" onclick="btn_close(this)">×</button>
    </div>
    <hr>
    <div class="alert alert-warning">
      ⚠️ 請注意，以下內容包含「劇透」爆雷資訊。
      <button class="btn-close" onclick="btn_close(this)">×</button>
    </div>
  </div>

  <script src="./js_button_alert.js"></script>
</body>
</html>

CSS

*{
    box-sizing: border-box;
  }
.alert-container{
  font-size: 0;
}
  .alert{
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
    width: 450px;
    height: 65px;
    border-radius: 10px;
    color: #ffffee;
    padding: 18px 5px 20px 10px;
    font-size: 17px; 
  }

  .alert-primary{
    color: #2C5282;
    background-color: #BEE3F8;
    border: 1px solid #2C5282
  }
  
  .alert-success{
    color: #276749;
    background-color: #C6F6D5;
    border: 1px solid #276749;
  }
  
  .alert-danger{
   color: #ff0000;
   background-color: #EDCAC7;
   border: 1px solid #ff0000;
  }

  .alert-warning{
    color: #975A16;
    background-color: #FEEBC8;
    border: 1px solid #975A16;
  }
  
  .btn-close{
    font-size: 18px;
    border: none;
    background: none;
    color: inherit
  }

  .btn-close:hover{
    cursor: pointer;
  }

JavaScript

function btn_close(in_elem){
    let para = in_elem.parentElement;
    let para_next_elem = para.nextElementSibling;
    if (para!=null){
        para.remove();
    }
    if (para_next_elem!=null){
        para_next_elem.remove();
    }

}