Skip to main content

Cara Membuat Alert Messages Box JavaScript

Hai semuanya, kali ini Saya Akan Memberikan Tutorial Cara Membuat Alert Messages Box Dengan JavaScript. Ok langsung saja Kita mulai Tutorial nya Berikut ini.
Langkah Pertama
Langkah pertama kali ini adalah membuat sebuah file baru dengan extensi *html.
Kemudian ketikkan kode berikut ini.
<!DOCTYPE html>

<html>

<head>

<title>Alert Messages Box Using JavaScript|EAGLEcodes</title>

</head>

<body>



</body>

</html>

Langkah kedua
Selanjutnya, Kita menambahkan Kotak Pesannya, Salin kode berikut.
<div class="pesan">

	<span class="tutup" onclick="this.parentElement.style.display='none';">&times;</span>

	Alert Messages Box Content....

</div>

Untuk text berwarna biru tersebut, kalian letakkan saja pesan yang ingin kalian buat.Letakkan Dibawah tag <body>.
Langkah Ketiga
Kemudian kita tambahkan CSS Nya, Untuk Membuat Tampilan Message Box nya lebih menarik di lihat.
<style type="text/css">

.pesan {

  padding: 20px;

  max-width:50%;

  text-align:left;

  background-color: #129AA8;

  color: #FFF;

  margin-top:50%;

  margin-left:24%;

  margin-bottom: 15px;

}

.tutup {

  margin-left: 15px;

  color: white;

  font-weight: bold;

  float: right;

  font-size: 22px;

  line-height: 20px;

  cursor: pointer;

  transition: 0.3s;

}

.tutup:hover {

  color: red;

}

</style>

Letakkan CSS Nya diatas Tag </head>.
Langkah Ke-empat
Langkah terakhir, menambahkan JavaScript nya.
Salin kode javascript berikut ini.
<script>

var close = document.getElementsByClassName("tutup");

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>

Letakkan dibawah Tag </head>.
Save File nya Dan coba Jalankan Dibrowser Kalian Masing.
Hasilnya akan seperti ini:
Sekian dulu pada artikel kali ini. Semoga bermanfaat.Baca Juga: CARA MEMBUAT TEXT MENGETIK SENDIRI DENGAN JAVASCRIPT
Labels:

Comments

Post a Comment

Popular posts from this blog

Cara Membuat ReverseIP Dengan PHP

Kali ini, saya akan memberikan Script  ReverseIP Dengan PHP. Sihlakan Kalian copykan Script PHP Berikut ini. <?php if(isset($_POST['chek'])){ $ip = $ip = gethostbyname($_POST['domain']); echo '<font>Website:</font><br>'; echo $_POST['domain']; echo '<br>'; echo '<font>Ip Domain:</font><br>'; echo '<font color="green">'.$ip.'</font>'; } echo '<form method="post"> <input type="text" name="domain" size="40"> <input type="submit" name="chek" value="Check"> </fomr>'; ?> Save file dengan extensi *php, kemudian jalankan di localhost kalian masing-masing. Demo Sekian dulu yah, semoga bermanfaat buat kita semua
Post a Comment
Baca Lebih Lanjut »

Cara Membuat Text Mengetik Sendiri Dengan JavaScript

Hai sobat codes, kali ini mimin bakal share sebuah tutorial bagaimana Cara Membuat Text Seakan Mengetik sendiri dengan Menggunakan JavaScript. Buatlah Sebuah File Baru dengan extensi HTML. Contoh : mengetik.html Kemudian Untuk Langkah-Langkah nya Sihlakan Ikuti Sesuai langkah-langkah Berikut ini, Perhatikan dengan baik-baik! Langkah Pertama Copy Script HTML dibawah Ini, pastekan Ke file baru yang telah sobat Buat. <!DOCTYPE html> <html> <head> <title>Text Sedang Mengetik...</title> </head> <body> </body> </html> Baca Juga:  Cara Membuat Text Berkedip Dengan JavaScript Langkah Kedua Kemudian, copykan kode JavaScript berikut ini. <script type="text/javascript"> TypingText = function(element, interval, cursor, finishedCallback) {   if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) {     this.running = true;     return;   }   this....
Post a Comment
Baca Lebih Lanjut »

Cara Membuat TEXT ASCII Di Termux

TEXT ASCII kali ini saya bakal share tutorial bagaimana cara membuat sebuah TEXT ASCII dengan Mudah menggunakan aplikasi Termux. Langsung saja Kita mulai tutorialnya.
Post a Comment
Baca Lebih Lanjut »