ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • Alert message bar Ex
      Search: Html Css JavaScript Html Css JavaScript 2023. 1. 21. 09:46

       

      <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

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

.closebtn {
  color: white; margin-left: 15px; float: right;
  font-weight: bold; font-size: 22px;
  line-height: 20px; cursor: pointer; transition: 0.3s;
}

.CloseBtn:hover { color: black; }

</style>
</head>
<body>

<h2>Alert Messages Bar </h2>
<p>Click on the "x" symbol to close the alert message bar.</p>
<div class="alert danger">
  <span class="CloseBtn">&times;</span>  
  <strong>Danger!</strong> danger message ex.
</div>

<div class="alert info">
  <span class="CloseBtn">&times;</span>  
  <strong>Info!</strong> information message ex.
</div>

<script>
var closeElm = document.getElementsByClassName("CloseBtn");
var i;

for (i = 0; i < closeElm.length; i++) {
  closeElm[i].onclick = function(){
    var div = this.parentElement;
    div.style.opacity = "0";
    setTimeout(function(){ div.style.display = "none"; }, 1600);
  }
}
</script>

</body>
</html>

       

      Alert Messages Bar

      Click on the "x" symbol to close the alert message bar.

      × Danger! danger message ex.
      × Info! information message ex.

       

      'Html Css JavaScript' 카테고리의 다른 글

      Promise Ex 결과에서 재귀적 사용  (0) 2023.01.22
      async await Ex2  (0) 2023.01.22
      Bootstrap  (0) 2023.01.21
      bootstrap Ex navs  (0) 2023.01.21
      Css, Style 적용 방식 (내부, 외부, 직결, external, internal, inline)  (0) 2023.01.18
      javascript window, document  (0) 2023.01.03
      Promise Ex2  (0) 2022.12.30
      Promise 개요  (0) 2022.12.25

      관련글 관련글 더보기

      댓글

    티스토리툴바