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 ganticontent: "Jenny Psychicfio";
dengan nama sobat...pesan .ttd:after {
content: "Jenny Psychicfio";
position: relative;
float: right;
}
Tombol Close
.close:after {Kode Css di atas bisa anda simpan di atas kode
content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivfxVc5NQA6mGYj0i2_xigJR8LSmCNAxAZVE3LhlLmCYKY-3ycDycSaClbCwp9_A1RdaXyKQ48si5-_VgVcvFtwtLyVh7XKYab7j-tZmVMAd_50i8-2LwyVqcqd4dpI9E8eoKtRsdLoG0/s1600/delete4.png');
position: absolute;
top: -10px;
right: -10px;
background: #ecf0f1;
border-radius: 100%;
padding: 10px;
z-index: 1000;
cursor: pointer;
}
]]></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>Dialog di atas belum bisa di eksekusi terlebih jquery pemanggil dialog box belum di pasang yg juga berfungsi untuk menyembunyikan.
<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>
Fungsi jQuery
<script type='text/javascript'>Itulah perintah jQuery dimana untuk membuka dan menutup dialog, silahkan sobat letakan di atas
//<![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>
</body>
Selamat mencoba, jika masih bingung silahkan tanyakan di komentar bawah...
0 Response to "Metode Sederhana Membuat Dialog Box"
Post a Comment