Bismillah…
Langsung Saja Siapkan Database :
langsung masuk ke code :
index.php
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Modal form</title>
<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="ui/jquery-1.4.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.draggable.js"></script>
<script type="text/javascript" src="ui/ui.resizable.js"></script>
<script type="text/javascript" src="ui/ui.dialog.js"></script>
<script type="text/javascript" src="ui/effects.core.js"></script>
<script type="text/javascript" src="ui/effects.highlight.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<link type="text/css" href="themes/base/udemos.css" rel="stylesheet" />
<style type="text/css">
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-button { outline: 0; margin:0; padding: .4em 1em .5em; text-decoration:none; !important; cursor:pointer; position: relative; text-align: center; }
.ui-dialog .ui-state-highlight, .ui-dialog .ui-state-error { padding: .3em; }
</style>
<script type="text/javascript">
$(function() {
$("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Create an account': function() {
var input_data = {
id : $('#id').val(),
nama : $('#nama').val(),
ajax : 1
};
$('#nama').attr("disabled",true);
$.ajax({
url : 'selamat.php',
type : 'POST',
data : input_data,
success : function(data){
$("#tampilkan").html(data);
$('#id').val(''),
$('#nama').val('');
$('#nama').attr("disabled",false);
$('#dialog').dialog('close');
}
});
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
$('#create-user').click(function() {
$('#dialog').dialog('open');
})
.hover(
function(){
$(this).addClass("ui-state-hover");
},
function(){
$(this).removeClass("ui-state-hover");
}
).mousedown(function(){
$(this).addClass("ui-state-active");
})
.mouseup(function(){
$(this).removeClass("ui-state-active");
});
$('#dialog-confirm').dialog({
autoOpen: false,
height: 180,
modal: true,
buttons: {
"Delete": function(){
var del_id = {id : $("#del_id").val()};
$.ajax({
type: "POST",
url: "hapus.php",
data: del_id,
success: function(data){
$('#tampilkan').html(data);
$('#dialog-confirm').dialog("close");
}
});
},
Cancel:function(){
$(this).dialog("close");
}
}
});
$('.delbutton').live("click",function(){
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
$('#del_id').val(del_id);
$("#dialog-confirm").dialog("open");
return false;
});
$(".edit").live("click",function(){
var id = $(this).attr("id");
var nama = $(this).attr("nama");
$('#id').val(id);
$('#nama').val(nama);
$("#dialog").dialog("open");
return false;
});
});
</script>
</head>
<body>
<div>
<div id="dialog" title="Create new user">
<p id="validateTips">All form fields are required.</p>
<form>
<fieldset id="dialog">
<label for="id">Id</label>
<input type="text" name="id" id="id" />
<label for="nama">Nama</label>
<input type="text" name="nama" id="nama" value="" />
</fieldset>
</form>
</div>
</div>
<div id="users-contain">
<h1>Existing Users:</h1>
<table >
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Hapus</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php mysql_connect("localhost","root","12345");
mysql_select_db("test");
$sql=mysql_query("select * from biodata");
while($data=mysql_fetch_array($sql)){
?>
<tr>
<td><?php echo "$data[id]"; ?></td>
<td><?php echo "$data[nama]"; ?></td>
<td>
<?php echo "<a href=\"#\" class=\"delbutton\" id=\"$data[id]\">hapus</a>"; ?> </td>
<td><?php echo "<a href=\"#\" class=\"edit\" id=\"$data[id]\" nama=\"$data[nama]\">edit</a>"; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<div id="dialog-confirm" title="delete item ?">
<input type="hidden" value='' id="del_id" name="del_id">
Are You Sure ?
</div>
</div>
<button id="create-user">Create new user</button>
</div><!-- End demo -->
<div>
<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
</div><!-- End demo-description -->
</body>
</html>
2. selamat.php
<?php
mysql_connect("localhost","root","12345");
mysql_select_db("test");
$id = $_POST['id'];
$nama = $_POST['nama'];
if($id != 0){
mysql_query("update biodata set nama='$nama' where id='$id'");
}else{
$sql=mysql_query("insert into biodata(id,nama)values('$id','$nama')");
}
echo"<meta http-equiv='refresh' content='0; url=modal-form.php'>";
?>
hapus.php
<?php
mysql_connect("localhost","root","12345");
mysql_select_db("test");
$id=$_POST['id'];
mysql_query("delete from biodata where id='$id'");
echo"<meta http-equiv='refresh' content='0; url=modal-form.php'>";
?>
hasil sebagai berikut
semoga membantu dan silahkan ber kreasi y..
download source code disini
menulis dibalik topi dan kopi 
yohan
/ 24/11/2013mau tanya kok ga bisa diinsert ya? database dan tabelnya sudah aku buat kok.
rifqifstsio8b
/ 24/11/2013udh di refresh belum datanya abis di insert, ?
kalau ng gini aja gan, coba pake library ini aja gan, lebih gampang dari yg saya bikin sendiri
http://jeasyui.com/demo/main/index.php?plugin=Application&theme=default&dir=ltr&pitem=
namanya : jeasyui.
Hj Asari
/ 14/12/2014Hello, saya dari malaysia. bagus sekali ringkas dan padat..
Muhammad Rifqi
/ 15/12/2014terima kasih atas kunjungannya
rangga
/ 21/09/2015bagaimana cara menambah tabel data di popupnnya?