Metode Sederhana Membuat Dialog Box

Metode Sederhana Membuat Dialog Box - Ada beberapa request dari sahabat yang menanyakan cara membuat kotak dialog box info seperti di blog ini. Sudah banyak artikel yang membahas tentang membuat kotak dialog box. Beberapa dari mereka mengimplementasikan tutoral ini dengan berbagai cara salah satunya dengan Show Hide..
Saya akan menjelaskan langkah demi langkah untuk membuat kotak dialog box info. Berikut Langkah - langkahnya..

Membuat Kotak Dialog

Pertama kita perlu membuat kotak dialognya, seperti berikut ini. Silahkan sobat sesuaikan Warna dan Lebar kotak dialog.

.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);
}

Membuat Kotak Pesan

Buat juga kotak pesan yg nantinya sobat tulis dengan kalimat sobat.

.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;
}

Tanda Tangan

Untuk beberapa blog mungkin mempunyai beberapa Author seperti di Blog ini ada 2 yaitu saya dan sahabat saya Jenny Psychicfio. Silahkan sobat ganti content: "Jenny Psychicfio"; dengan nama sobat..

.pesan .ttd:after {
  content: "Jenny Psychicfio";
  position: relative;
  float: right;
}

Tombol Close

.close:after {
  content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMt5Ziyg_qT2zkmjTSD4VCCnnw3vA4NKrvpQxt1EqZHmYlytnVFN0ipPV3MTueBcoWdRpZ1UzNW0DTzTwd3qAHO7uqNIbnWh0vfjFfwu0xbZ0d9xwTG0oIbKMOqpewqzR5ZVl5qACnDc/s1600/delete4.png');
  position: absolute;
  top: -10px;
  right: -10px;
  background: #ecf0f1;
  border-radius: 100%;
  padding: 10px;
  z-index: 1000;
  cursor: pointer;
}

Kode Css di atas bisa anda simpan di atas kode ]]></b:skin> atau </style>

Setelah semua itu buat kode HTML yang nantinya di tambahkan dengan tombol pemanggil yang berfungsi untuk membuka Dialog Box tersebut.

<button class='info'>Info</button>
<div class='box'>
  <div class='pesan'>
Selamat datang di Blog Dian Anarchyta. 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>

Dialog di atas belum bisa di eksekusi terlebih jquery pemanggil dialog box belum di pasang yg juga berfungsi untuk menyembunyikan.

Fungsi jQuery

<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>

Itulah perintah jQuery dimana untuk membuka dan menutup dialog, silahkan sobat letakan di atas </body>

Selamat mencoba, jika masih bingung silahkan tanyakan di komentar bawah...