ວິທະຍາສາດທີ່ຈະສ້າງ:

ບິນວິທະຍາສາດທີ່ຈະນຳໃຊ້ CSS ໃນການສ້າງຂໍ້ຄວາມການເຕືອນ.

ສ້າງຂໍ້ຄວາມການເຕືອນ

ບາງບານ - ການເພີ່ມ HTML:

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
  This is an alert box.
</div>

ຖ້າເຈົ້າຢາກປິດຂໍ້ຄວາມການເຕືອນອີກແລ້ວນີ້ ເຈົ້າຈະຕ້ອງເພີ່ມ onclick ທາງຂອງບັນດາຄວາມ <span> ປະກອບສາຍອັນຕະລາຍທີ່ສະແດງວ່າ "ເມື່ອຂ້ອຍຄຳການດັງຂ້ອຍຈະປິດປະກອບຜູ້ປົກຄອງຂອງຂ້ອຍ" - ບໍລິເວນ <div class="alert">。

ຄຳເຕືອນ:ນຳໃຊ້ HTML entity "×" ໃນການສ້າງປະເພດ "x"。

ບາງບານ - ການເພີ່ມ CSS:

ການກະຕຸ້ມທົບມະຍົກແລະປະກອບສິ້ນຫຼີກຂອງປະກອບສິ້ນຫຼີກ

/* ປະກອບສິ້ນຫຼີກຂໍ້ຄວາມ */
.alert {
  padding: 20px;
  background-color: #f44336; /* Red */
  color: white;
  margin-bottom: 15px;
}
/* ປະກອບສິ້ນຫຼີກ */
.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;
}

亲自试一试

ການຫຼົງຫຼີກ

ຖ້າມີຫຼາຍຄວາມຄົນຕົວໃນເວລາຂອງເວັບໄຊ <span> ຂອງປະກອບສິ້ນຫຼີກ onclick ຂັ້ນຕອນ

ແລະຖ້າທ່ານຕ້ອງການປິດຈຸດເປັນປະກອບສິ້ນຫຼີກຢ່າງຫຼາຍກວ່າຄວາມຄົນຕົວ alert ໃນປະເພດ:

ຄວາມຄົນຕົວ

<style>
.alert {
  opacity: 1;
  transition: opacity 0.6s; /* 600 ວິນາທີຫຼົງຫຼີກ */
}
</style>
<script>
// ຄົ້ນຫາປະຈຳປະກອບທີ່ມີ class="closebtn"
var close = document.getElementsByClassName("closebtn");
var i;
// ການຫຼົງຫຼີກທຸກຈຸດເປັນປະກອບສິ້ນຫຼີກ
for (i = 0; i < close.length; i++) {
  // ການເສັງຂອງຈຸດເປັນປະກອບສິ້ນຫຼີກ
  close[i].onclick = function(){
    // ຄົ້ນຫາປະຈຳປະກອບແຜງບັນທຶກ <span class="closebtn"> (div class="alert")
    var div = this.parentElement;
    // ການກະຕຸ້ມຄວາມບາງຂອງ div ເປັນ 0 (ສະຫຼາກ)
    div.style.opacity = "0";
    // 600 ວິນາທີຫຼັງຈາກປິດ div (ຄືກັບເວລາການຫຼົງຫຼີກ)
    setTimeout(function(){ div.style.display = "none"; }, 600);
  }
}

亲自试一试

相关页面

教程：如何创建便签