可能重複：
jqGrid Reposition Delete Confirmation Box如何居中jqGrid popup模態窗口？
我使用的jqGrid的幾天開始，一切工作cool.so遠越好。 與我接壤的是，當您單擊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";
}
});
你可以看到生活的例子here 。
或只使用
beforeShowForm: function(form) {$("#editmod" + gridId).addClass("centered"); }
其中gridId是網格的ID，然後在CSS是這樣的：
div.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
歡呼 亞雷克
此解決方案僅適用於div中心爲100px高度和200px寬度的情況。 – 2011-10-20 14:33:11
對於一些因爲列出的奧列格的代碼並不完全適合我（儘管如此沒有它，我就不會有這麼遠）。
兩個問題：
1.）如果你只是粘貼在那裏，你會移動你的編輯模式，但不是你的添加模式。我只有一個添加模式，所以這讓我很困惑。你基本上只是double the code（見下文）。
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";
}
}
這個解決方案爲我工作 – frabiacca 2012-01-04 19:29:19
代碼可以用於中心窗口。 Oleg示例代碼用於此。
如果窗體高度發生變化，它不居中。測試用例重現表單不居中問題。
重現步驟：
Observerd：不居中
視圖窗口，底部內容是不可見和不可訪問。
<!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>
感謝兄弟，這很酷！只適用於任何與我處於同一情況的人。請注意，編輯模式彈出窗口的名稱是「editmod」+ name_of_your_grid「。您可以在firefox或任何基於Firefox的瀏覽器中使用螢火蟲進行驗證 – 2010-10-19 15:04:55
@black sensei：良好的建議我忘了提及這一點爲了讓事情變得清晰起見，我將代碼改爲了一個小問題 – Oleg 2010-10-19 15:15:42
再次感謝您的時間和幫助 – 2010-10-19 19:04:53