Cara membuat alert di html

Jika pengguna mengklik “OK”, kotak akan mengembalikan nilai true. Jika pengguna mengklik “Batal”, kotak akan menampilkan false.

Table of Contents Show

Prompt Box (Kotak Prompt)
Banyak Alert
Apa itu alert dalam HTML?
Bagaimana cara menuliskan Hello World di alert?
Apa itu alert dalam javascript?
Bagaimana cara menampilkan tulisan Hello World pada alert box dalam javascript?

Sintals:

window.confirm(“sometext“);

Metode window.confirm() bisa ditulis tanpa awalan window.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Confirm Box</h2>


<button onclick="myFunction()">Cobalah</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Tekan tombol!")) {
    txt = "Anda menekan OK!";
  } else {
    txt = "Anda menekan Cancel!";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Prompt Box (Kotak Prompt)

Kotak prompt sering digunakan jika ingin pengguna memasukkan nilai sebelum memasuki halaman.

Ketika kotak prompt muncul, pengguna harus mengklik “OK” atau “Cancel” untuk melanjutkan setelah memasukkan nilai masukan.

Jika pengguna mengklik “OK” kotak mengembalikan nilai input. Jika pengguna mengklik “Cancel” kotak mengembalikan null.

Sintaks

window.prompt(“sometext“,”defaultText“);

Metode window.prompt() bisa ditulis tanpa awalan window.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Prompt</h2>

<button onclick="myFunction()">Cobalah</button>

<p id="demo"></p>

<script>
function myFunction() {
  var txt;
  var person = prompt("Silahkan masukan nama anda:", "Harry Potter");
  if (person == null || person == "") {
    txt = "Pengguna membatalkan permintaan.";
  } else {
    txt = "Hello " + person + "! Apa kabarnya hari ini?";
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Line Break

Untuk menampilkan jeda baris di dalam kotak popup, gunakan garis miring ke belakang diikuti dengan karakter n.

Pesan peringatan(alert) dapat digunakan untuk memberi tahu pengguna tentang sesuatu yang istimewa, seperti danger, success, information atau warning.

<!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.success {background-color: #4CAF50;}
.alert.info {background-color: #2196F3;}
.alert.warning {background-color: #ff9800;}

.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;
}
</style>
</head>
<body>

<h2>Alert Messages</h2>
<p>Klik pada simbol "x" untuk menutup alert(pesan peringatan).</p>
<div class="alert">
  <span class="closebtn">&times;</span>  
  <strong>Danger!</strong> Menunjukkan tindakan berbahaya atau berpotensi negatif.
</div>

<div class="alert success">
  <span class="closebtn">&times;</span>  
  <strong>Success!</strong> Menunjukkan tindakan sukses atau positif.
</div>

<div class="alert info">
  <span class="closebtn">&times;</span>  
  <strong>Info!</strong> Menunjukkan perubahan atau tindakan informatif yang netral.
</div>

<div class="alert warning">
  <span class="closebtn">&times;</span>  
  <strong>Warning!</strong> Menunjukkan peringatan yang mungkin perlu diperhatikan.
</div>

<script>
var close = document.getElementsByClassName("closebtn");
var i;

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

</body>
</html>

Buat Alert

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

.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;
}
</style>
</head>
<body>

<h2>Alert Messages</h2>

<p>Klik pada simbol "x" untuk menutup pesan peringatan(alert).</p>
<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Menunjukkan tindakan berbahaya atau berpotensi negatif.
</div>

</body>
</html>

Langkah 1) Tambahkan HTML:
Contoh

<div class="alert">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
 Ini adalah alert box.
</div>

Jika ingin menggunakan penutup alert seperti tanda “x”, tambahkan elemen <span> dengan atribut onclickyang mengatakan “ketika akan mengklik saya, sembunyikan elemen induk saya” – yang merupakan container <div> (class = “alert”).

Tip: Gunakan entitas HTML “×” untuk membuat huruf “x”.

Langkah 2) Tambahkan CSS:
Gaya kotak peringatan dan tombol tutup:
Contoh

/* Alert message box */
.alert {
  padding: 20px;
  background-color: #f44336; /* merah */
  color: white;
  margin-bottom: 15px;
}

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

/* Saat menggerakkan mouse ke atas tombol tutup */
.closebtn:hover {
  color: black;
}

Banyak Alert

Jika ingin memiliki banyak pesan peringatan(alert) pada sebuah halaman, kita dapat menambahkan skrip berikut untuk menutup peringatan(alert) yang berbeda tanpa menggunakan atribut onclick pada setiap elemen.