Membuat dialog box sederhana dengan JQuery

Selamat datang di Blog Irvan Efendy.
Ini hanya contoh dialog box sederhana dengan jQuery Untuk membuatnya silahkan pahami sedikit demi sedikit jangan terburu-buru.

Membuat Dialog Box Sederhana dengan JQuery Mungkin tutorial ini sudah tidak asing lagi buat sobat karena sudah banyak tutorial tentang Dialog Box ini, baik di blog lokal atau di luaran sana.
Alasan kenapa saya tulis ulang disini karena masih banyak sahabat Blogger yang bertanya² pada saya tentang cara membuat dialog box ini.
Disini saya akan menjelaskan step by step pembuatannya. Untuk membuat kotak dialog yang berbeda dengan tutorial ini, setidaknya harus memahami tentang CSS, HTML dan jQuery.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

/* Kotak Dialog Box */
.box {
  width: 600px;
  height: 200px;
  background-color: #2c3e50;
  border-radius: 5px;
  position: absolute;
  left: 50%;
  margin-top: -150px;
  margin-left: -300px;
  top: -9999px;
  z-index: 1000;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
}
.box .pesan {
  position: absolute;
  top: 30px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  padding: 5px 10px;
  overflow: auto;
  background-color: #1abc9c;
  color: #fff;
  text-align: left;
  line-height: 1.5em;
  font-size: 14px;
  border-radius: 0 0 5px 5px;
}
.pesan .ttd:after {
  content: "Irvan Efendy";
  position: relative;
  float: right;
}
.close:after {
  content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNxV2Y9ZzhK-58IpSBO1rnNlqrcseO3yBdztRGLjtLpgT9LxUvH0vQkh0D4Sw1FTNCqT0-eSl3yWe1SNhLG85Q68CXt2GeY0ddslx7NsgDuFD7EwOLMUsB6XXyjvlyqZPnWgmPf7IFw38/s1600/delete4.png');
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ecf0f1;
  border-radius: 100%;
  padding: 10px;
  z-index: 1000;
  cursor: pointer;
}

5. Tekan Ctrl+F cari kode </body> Lalu masukan script di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
//tampilkan kotak dialog saat muncul dengan class info
    $('.info').click(function () {
        $('.info').hide();
        $('.box').css({top: '50%',position: 'fixed'})
        $('body').css({background: '#123',transition: 'all 5s'}) //efect body berubah warna
    });
//sembunyikan kotak dialog dengan class close
    $('.close').click(function () {
        $('.box').hide()
        $('body').css({background: '#ecf0f1',transition: 'all 5s'}) //efect body berubah warna
    })
});
//]]>
</script>

6. Kemudian simpan template sobat.

Penerapannya:

Supaya kotak dialog box diatas muncul blog sobat » Silahkan masukan kode HTML berikut ini kedalam widget blog sobat.

<button class='info'>Info</button>
<div class='box'>
  <div class='pesan'>
Selamat datang di Blog Irvan Efendy. Ini hanya contoh dialog box sederhana dengan jQuery. Untuk membuatnya, silahkan pahami sedikit demi sedikit, jangan terburu-buru.<br />
 <span class='ttd'></span>
  </div>
<div class='close'></div>
</div>

Semoga tutorial ini dapat membantu sobat,..

Sumber saya liput dari :
- http://blog.kangismet.net/2013/11/membuat-simple-dialog-box-dengan-jquery.html
- http://the-anarchyta.blogspot.com/2014/04/metode-sederhana-membuat-dialog-box.html

Membuat dialog box sederhana dengan JQuery 2014-06-16T17:26:00-07:00 Rating: 4.5 Diposkan Oleh: Unknown