Metode Sederhana Membuat Dialog Box Keren

Metode Sederhana Membuat Dialog Box Keren adalah salah satu kegiatan seorang blogger termasuk saya dengan membuat blog/websitenya mempuyai info dan sekaligus menyampaikan pesan selamat datang kepada pengunjung blognya. Tutorial ini saya dapat ketika saya meminta bantuan di internet melalui om google dengan mengetik kata kunci cara membuat dialog box di blog, ternyata saya tak sia-sia meluangkan waktu, om google langsung memberi bantuan dengan menampilkan di layar komputer saya metode membuat dialog box yang dishare oleh Dian Anarchyta . sebenarnya sudah banyak artikel yang membahas tentang membuat kotak dialog box. Beberapa dari mereka mengimplementasikan tutorial ini dengan berbagai cara salah satunya dengan Show Hide..

Saya akan menjelaskan langkah demi langkah membuat kotak dialog box info. Berikut langkah-langkahnya..

Membuat Kotak Dialog

Pertama kita perlu membuat kotak dialognya, seperti berikut.

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

Silahkan Anda sesuaikan warna dan lebar kotak dialog.

Membuat Kotak Pesan

Buat juga kotak pesan yang nantinya Anda tulis dengan kalimat Anda sendiri.

.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

Biar lebih keren lagi buatlah tanda tangan dengan memasukkan kode seperti di bawah ini.

.pesan .ttd:after {
  content: "Alvin Warasi";
  position: relative;
  float: right;
}

Silahkan Anda ganti Content: "Alvin Warasi"; dengan nama Anda.

Tombol Close

.close:after {
  content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhjOlNUqLoGAsNvdZdAl9jOdJ70LxDpZ7IRHpjJqMcZa-4Lhc9ooP_9O8qtaomvWCBajZuoIN7ZPJEtpiBBql9XOX5lfPGAFgmMb3gLGwqj2_GbjuEX0qZ52De6we64ZYXMWSEgsA0O_I/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 tepat di atas kode ]]></b:skin> atau </style>

Setelah selesai semua selanjutnya 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'>
Welcome to my blog!!!
Anda Disini di Ijinkan untuk mengutip sebagian tulisan di situs ini tetapi tidak boleh seluruhnya dengan menyebutkan link dan sumber.
Apabila ditemukan copy/paste seluruh artikel akan diajukan ke DMCA Google supaya dibanned dari Google atau dihapus dari Blogger. Buat sahabat Blog Alvin Warasi yang merasa mencopy paste Artikel silahkan sertakan sumbernya, sebelum anda mendapat PERINGATAN dari pihak Google. Jika Blog Anda di hapus oleh pihak Google saya tidak bertanggung jawab.,..<br/><br/>Terima Kasih<br/><br/>
 <span class='ttd'/>
  </div>
<div class='close'/>
</div>

Dialog di atas belum bisa dieksekusi terlebih jquery pemanggil dialog box belum dipasang yang juga berfungsi untuk menyembunyikan.

<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 Anda letakkan tepat di atas </body>

Selamat tutorial ini dapat membantu Anda,..

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250