单击按钮时显示 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

请在此处查看 ColorBox 插件示例。