在按鈕上單擊顯示fancybox輸入表單

Question

使用flexigrid，我在工具欄上有兩個按鈕（添加，刪除）。點擊添加按鈕時，我想創建一個fancybox輸入表單。我怎樣才能做到這一點？

這裏是我的代碼：

<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> 

Answer 1

退房的顏色框插件例子here。