 |
| contoh kotak dialog |
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/AVvXsEjLxUa_YJuE2wabfmSKq6ei-5AY76Y15NOfB_HDT_f9zrD48Rjdbh_qTZYYmCUDMP-2N2VIIaYBqwjvPIf6K_zvuZwdRNJmAUxwMt2_62D_BJDVDyEtvOlvP6HYCum8pzaIBEVBIEPqyNs/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.
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 mecoba}
jika ada yang kurang dipahami silahkan berkomentar :)
—
Jumat, 16 Maret 2018
—
Add Comment
Belum ada tanggapan untuk "langkah - langkah(metode) membuat kotak dialog"
Posting Komentar