Demo of dialog box with animation while closing and displaying using JQuery

Your Name



HTML

<button id="b1">Open Dialog Box</button>
<div id="my_dialog" title="plus2net  dialog">
  <p>Your Name <form id=f1><input type=text id=t1 name=t1><input type=text id=t2 name=t2></form></p>
</div>

JQuery


<script>
   $(document).ready(function() {
var pos = { my: "center center", at: "center top", of: window };
$(function() {
   $( "#my_dialog" ).dialog({
   	autoOpen: false,
   position:pos,
    show: {
     effect: "fade",
     duration: 2000
     },
    hide: {
     effect:"size",
     duration:200
     },  
    buttons: {
     "Close ": function() {
     $( this ).dialog( "close" );
     }
    }
		});
});
$("#b1").click(function(){
$( "#my_dialog" ).dialog( "open" );
})
})
</script>



Dialog Box Demo Display on load Display after time delay Open on Button Click Add one Close Button With Input box & Submit Button With Hide & show animation effects Passing data to Dialog box Displaying database record in Dialog box ( by entering ID) Displaying database record in Dialog box ( By button click) Displaying Form for user input and inserting data to table Edit / update a record by usign a form in Dialog box