如何居中jqGrid弹出模式窗口？

Question

可能重复:
jqGrid重新定位删除确认框

我已经开始使用jqGrid几天了,而且一切都很酷.这么好.与我NavGrid无关的是,当你在没有选择行的情况下点击编辑按钮时,它会显示一个居中的模态弹出窗口,通知没有选择任何行.但是当你点击添加或编辑(带有选定的行)时,它会在网格的左侧显示一个模态.没有居中.

我想找到一种方法来集中它.

怎么做的？或者它无法开箱即用？

谢谢你读这个

Answer 1

在我看来,最简单的方法是更改beforeShowForm事件内的对话框位置:

var grid = $("#list");    
grid.jqGrid('navGrid','#pager',
            {add:false,del:false,search:false,refresh:false},
            { beforeShowForm: function(form) {
                  // "editmodlist"
                  var dlgDiv = $("#editmod" + grid[0].id);
                  var parentDiv = dlgDiv.parent(); // div#gbox_list
                  var dlgWidth = dlgDiv.width();
                  var parentWidth = parentDiv.width();
                  var dlgHeight = dlgDiv.height();
                  var parentHeight = parentDiv.height();
                  // TODO: change parentWidth and parentHeight in case of the grid
                  //       is larger as the browser window
                  dlgDiv[0].style.top = Math.round((parentHeight-dlgHeight)/2) + "px";
                  dlgDiv[0].style.left = Math.round((parentWidth-dlgWidth)/2) + "px";
              }
            });

你可以在这里看到实例.

Answer 2

出于某种原因,Oleg的代码,如上所列,对我来说并不完全有效(尽管如果没有它我就不会有这么远).

两个问题:
1.)如果你只是粘贴在那里,你将移动你的编辑模式,但不是你的添加模式.我只有一个添加模式,所以这让人困惑了一段时间.你基本上只是加倍代码(见下文).

2.)所写的代码是相对于整个页面而不是父div添加平均的顶部和左侧.我确定我错过了一些明显的东西(或者也许这就是TODO的意思？),但这对我有用......

{ 
    beforeShowForm: function(form) {
        alert('beforeShowForm FOR EDIT MODAL ONLY');
        // cut and paste code below to use for edit modal too.
    }
},
// options for add new modal here:
{
    beforeShowForm: function(form)  {
        //alert('adding' + "#editmod" + grdNames[0].id);
        var dlgDiv = $("#editmod" + grdNames[0].id);
        var parentDiv = dlgDiv.parent(); // div#gbox_list
        var dlgWidth = dlgDiv.width();
        var parentWidth = parentDiv.width();
        var dlgHeight = dlgDiv.height();
        var parentHeight = parentDiv.height();

        // Grabbed jQuery for grabbing offsets from here:
        //https://stackoverflow.com/questions/3170902/select-text-and-then-calculate-its-distance-from-top-with-javascript
        var parentTop = parentDiv.offset().top;
        var parentLeft = parentDiv.offset().left;


        // HINT: change parentWidth and parentHeight in case of the grid
        //       is larger as the browser window
        dlgDiv[0].style.top =  Math.round(  parentTop  + (parentHeight-dlgHeight)/2  ) + "px";
        dlgDiv[0].style.left = Math.round(  parentLeft + (parentWidth-dlgWidth  )/2 )  + "px";

    }
}