Membuat Pesan Konfirmasi Facebook dengan jQuery dan CSS

Jika Anda sering menggunakan Facebook, tentu Anda sudah tidak asing lagi dengan pesan konfirmasi yang muncul di Facebook buka ? Pada tutorial ini, kita akan coba membuat pesan konfirmasi seperti facebook dengan menggunakan plugin jQuery dan CSS. Nantinya, fitur pesan konfirmasi ini dapat Anda gunakan untuk menampilkan berbagai pesan konfirmasi kepada user.

Untuk melihat cara kerja aplikasi ini, silahkan coba demo dibawah.

Download

Demo

Langkah 1 – HTML

Buatlah skrip HTML. Pada file ini Anda dapat meletakkan file/data yang ingin dihapus serta syntaks jQuery.

<link href="facebook.alert.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_facebook.alert.js"></script>
<script type="text/javascript">
             
$(document).ready( function() {
$("#link_hapus").click( function()
{
jConfirm('Apakah Anda ingin menghapus data ini ?', 'Konfirmasi',
     
function(r) {
if(r==true)
{
$("#box").fadeOut(300);
}                      
});
});
});
             
</script>
</head>
 
<body style="margin:0 auto; width:400px; height:400px;">
<div>
<h1 align="center"><a href="https://www.eplusgo.com">ePlusGo</a></h1></div>
         
         
<div id="box" style=" background-color:#dedede; border:1px solid #333; height:90px; width:300px; padding:5px; border-radius:5px; margin:0 auto;">
Klik Link Hapus
<div style="float:right; width:60px; height:20px"><a href="#" id="link_hapus" title="Hapus">Hapus</a></div>
</div>

Langkah 2 – CSS

Syntaks css ini digunakan untuk memberikan style pada kotak pesan konfirmasi yang akan muncul. Anda dapat mengedit style css ini sesuai kebutuhan Anda.

#popup_container {
font-family:'Lucida Grande',arial;
font-weight:;
text-align:left;
font-size: 12px;
width: 364px; 
height: 86px; 
background: #F3F3F3;
border-radius:5px;
border:solid 7px #dedede;
color: #000;
}

#popup_title {
display:none;
}

#popup_message {
padding-top: 15px;
padding-left: 15px;
}

#popup_panel {
text-align: left;
padding-left:15px;  
}

input
{
background-color:#476EA7;
padding:3px;
color:#FFFFFF;
margin-top:20px;
margin-right:10px;
border-radius:3px;
}