Showing fancybox input form on button click

Using flexigrid, I have two buttons (add, delete) on the toolbar. When the add button is clicked, I want to create a fancybox input form. How can I do this?

Here is my code:

<script type="text/javascript">

$(document).ready(function(){

    $("#flex1").flexigrid({ 

        url: 'post2.php',
        dataType: 'json',
        colModel : [
                    {display: 'seq', name : 'seq', width : 40, sortable : true, align: 'center'},
                    {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
                    {display: 'ID', name : 'id', width : 120, sortable : true, align: 'left'},
                    {display: 'Pass', name : 'pass', width : 130, sortable : true, align: 'left', hide: false, edittype:"checkbox", formatter:'checkbox', formatoptions: {disabled:true}},                  
                    {display: 'Mail', name : 'mail', width : 80, sortable : true, align: 'right'},                                                                          
                    ],
        buttons : [
                    {name: 'Add', bclass: 'add', onpress : test},   
                    {name: 'Delete', bclass: 'delete', onpress : test},
                    {name: 'Edit', bclass: 'edit', onpress : test},                             

                    ],      
        searchitems : [
                    {display: 'Seq', name : 'seq'},
                    {display开发者_运维技巧: 'ID', name : 'id', isdefault: true},
                    {display: 'Name', name : 'name'},
                    {display: 'Mail', name : 'mail'},
                    {display: 'Pass', name : 'pass'}
                    ],
        sortname: "id",
        sortorder: "asc",
        usepager: true,
        title: 'Staff',         
        useRp: true,
        rp: 15,
        showTableToggleBtn: true,
        //method : "GET", 
        width: 1010,
        height: 365


    });


    function test(com,grid) {
            if (com == 'Delete') {
                if($('.trSelected').length>0){
                    if(confirm('削除：　' + $('.trSelected').length + '行　宜しいですか?')){
                        var items = $('.trSelected');
                        var itemlist ='';
                        for(i=0;i<items.length;i++){
                            itemlist+= items[i].id.substr(3);
                        }
                        location.replace('./delete.php?val='+itemlist);//This is the URLthat you remove the selected registers
                        return;
                    }
                } else{
                    alert('Please select the members to remove.');
                }
            } **else if (com == 'Add') {        
                $(".fbox").fancybox({
                    'overlayShow': true ,
                    'overlayOpacity': 0.7 
                });    

            }** else if (com =='Edit'){
                if($('.trSelected').length>0){
                    if($('.trSelected').length>1){
                        alert('Please select just one register');
                        return;
                    }
                    var items = $('.trSelected');
                    var itemlist ='';
                    for(i=0;i<items.length;i++){
                        itemlist+= items[i].id.substr(3);
                    }
                    //location.replace('./edit/'+itemlist);
                    location.replace('./'+itemlist);
                    return;
                } else{
                    alert('Please select one member to edit.');
                }
            }
        } 


});

</script>

---

Check out the ColorBox plugin example here.