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 bisa juga menggunakan tanda tangan. Silahkan sobat ganti content: "Apriliana.com"; dengan nama sobat..

.pesan .ttd:after {
  content: "Apriliana.com";
  position: relative;
  float: right;
}

Tombol Close

.close:after {
  content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGT8-a0k2dkCsFzAOWvQfaggtb3MUkwa9PDJqdRPwxtL4UG8lnM2TEO1RGFtBHf6W1obhrsQm2T5njnUhz036DeXzGw4ijrWVLxMoeewKj1SQEP7O-pksNv_HM1pBJSMIkqE2RDSWKM6o/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 Apriliana Blog, blog pribadi saya yang berisi tentang berbagi mengenai Blogging, SEO, Tips, Tutorial, Adsense, Internet Marketing, dan juga Template Blog. .<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>

Demo

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

APRILIANA Blog