如何居中jqGrid弹出模式窗口？
可能重复：
jqGrid重新定位删除确认框
我已经开始使用jqGrid几天了，一切都很酷。所以很好。 与我NavGrid是，当您单击NavGrid编辑按钮而不选择行时，它会显示一个居中的模态弹出窗口，通知没有选择任何行。 但是当你点击添加或编辑（带有选定的行）时，它会在网格的左侧显示一个模态。不会居中。
我想找到一种方法来集中它。
怎么做的？ 或者它无法开箱即用？
谢谢你读这个
在我看来，最简单的方法是更改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"; } });
你可以在这里看到实例。
出于某种原因，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"; } }
下面的代码可用于居中窗口。 Oleg示例代码用于此。
如果形状高度发生变化，则不会居中。 用于重现表单不是居中问题的测试用例。
重现步骤：
- 在IE9中打开下面的页面
- 打开第一行的视图
- 在视图窗口中单击下一行按钮以打开第二行。
Observerd：
视图窗口不居中，底部内容不可见且无法访问。
或者只是使用
beforeShowForm: function(form) {$("#editmod" + gridId).addClass("centered"); }
gridId是你网格的ID，然后在css中是这样的：
div.centered { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;
}
欢呼Jarek