jQuery 如何将 jqGrid 弹出模式窗口居中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3967488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to center jqGrid popup modal window?
提问by black sensei
Possible Duplicate:
jqGrid Reposition Delete Confirmation Box
可能重复：
jqGrid 重新定位删除确认框
I've started using jqGrid for few days and everything is working cool.so far so good.
What borders me is that when you click on edit button in the NavGridwithout selecting a row, it shows a centered modal popup notifying of no row being selected.
But when you click on add or edit(with selected row) it shows a modal at the left side of the grid.Not centered at all.
我已经开始使用 jqGrid 几天了，一切都很好。到目前为止一切顺利。与我接壤的是，当您在NavGrid不选择行的情况下单击编辑按钮时，它会显示一个居中的模式弹出窗口，通知没有选择行。但是当您单击添加或编辑（带有选定行）时，它会在网格左侧显示一个模式。根本不居中。
I'll like to find a way to center it.
我想找到一种方法来集中它。
How is that done? or it can not be done out of the box?
这是怎么做的？或者它不能开箱即用？
thanks for reading this
感谢您阅读本文
回答by Oleg
It seems to me, that the easiest way to do this is to change the dialog position inside of the beforeShowFormevent:
在我看来，最简单的方法是更改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";
}
});
You can see live the example here.
您可以在此处查看示例。
回答by ruffin
For some reason Oleg's code, as listed, wasn't completely working for me (though I wouldn't have ever gotten this far without it).
出于某种原因，列出的 Oleg 的代码并不完全适合我（尽管如果没有它，我永远不会走到这一步）。
Two issues:
1.) If you just paste in what's there, you'll move your edit modal, but not your add modal. I only have an add modal, so that was confusing for a while. You basically just double the code(see below).
两个问题：
1.) 如果您只是粘贴那里的内容，您将移动您的编辑模式，而不是您的添加模式。我只有一个添加模式，所以这让我困惑了一段时间。您基本上只需将代码加倍（见下文）。
2.) The code as written was adding the averaged top and left relative to the entire page rather than the parent div. I'm sure I'm missing something obvious (or perhaps that's what the TODO is about?), but this worked for me...
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";
}
}
回答by Andrus
Code below can used to center window. Oleg sample code is used for that.
下面的代码可用于居中窗口。Oleg 示例代码用于此目的。
If form height changes, it does not center. Testcase to reproduce form not centered issue.
如果表格高度改变，它不会居中。测试用例重现表单不居中的问题。
Steps to reproduce:
重现步骤：
- Open page below in IE9
- Open view for first row
- click in view window next row button to open second row.
- 在IE9中打开下面的页面
- 打开第一行的视图
- 单击视图窗口下一行按钮打开第二行。
Observerd:
观察者：
view window is not centered, bottom content is not visible and not accessible.
视图窗口未居中，底部内容不可见且不可访问。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.jqgrid.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/jquery.searchFilter.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/css/ui.multiselect.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/ui.multiselect.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.base.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.common.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.formedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.inlinedit.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.custom.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.fmatter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/jquery.searchFilter.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.7.2/src/grid.jqueryui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.extend(jQuery.jgrid.view, {
recreateForm: true,
closeOnEscape: true,
width: 0.96*screen.width,
beforeShowForm: function ($form) {
$form.css({"max-height": 0.72*screen.height+"px"});
$form.find("td.DataTD").each(function () {
var $this = $(this), html = $this.html(); // <span> </span>
if (html.substr(0, 6) === " ") {
$(this).html(html.substr(6));
}
$this.children("span").css({
overflow: "auto",
"text-align": "inherit", // overwrite 'text-align: "right"'
display: "inline-block"/*,
"max-height": "100px"*/
});
});
// "editmodlist"
var dlgDiv = $("#viewmod" + $('#list')[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";
}
});
var mydata = [
{id:"1",invdate:"2007-10-02",name:"row1",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"2",invdate:"2007-10-02",name:"clicking\n me\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nincreases form height clicking me increases form height test2 sdfsdfsd dfksdfkj sdfjksdfjk sdsdl sdklfsdjklf dsflsdl sdlfsdfklj lsdlf sdlsdfklsdjlk sdfsdlfkjsd sflsdfkjsdfs sdfsjdfklsdklfj fsdjflsdfj",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}
];
var grid = $("#list");
grid.jqGrid({
data: mydata,
datatype: "local",
colModel:[
{name:'id',index:'id', key: true, width:70, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date", editable: true},
{name:'name',index:'name', style:'width:"20px"', editable: true, edittype: 'textarea',
wrap: 'on',
editoptions: { wrap : "on",
style : "width:30px"
}
},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float", editable: true},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float", editable: true},
{name:'total',index:'total', width:80,align:"right",sorttype:"float", editable: true},
{name:'note',index:'note', width:150, sortable:false}
],
pager:'#pager',
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
height: "100%",
caption: "Custom Navigation to Top Toolbar"
});
grid.jqGrid('navGrid','#pager',{add:false,del:false,search:false,refresh:false, edit: false, view: true});
});
</script>
</head>
<body style="overflow:hidden">
<table id="list"><tbody><tr><td/></tr></tbody></table>
<div id="pager"/>
</body>
</html>
回答by Jarek Krochmalski
or just use
或者只是使用
beforeShowForm: function(form) {$("#editmod" + gridId).addClass("centered"); }
where gridId is your grid's ID, and then in css something like this:
其中 gridId 是您网格的 ID，然后在 css 中是这样的：
div.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
}
cheers Jarek
欢呼杰瑞克
