首页 > 代码库 > 如何居中jqGrid的弹出模式窗口
如何居中jqGrid的弹出模式窗口
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"; } });你可以看到生活的例子在这里。
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: // CodeGo.net 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"; }}
3. 下面的代码到中心窗口。奥列格示例代码的。 如果表格高度的变化，它不居中。测试用例重现不居中的形式问题。 重现的步骤： 下面在IE9中打开页面 对于第一行打开查看 单击视图窗口下排按钮，打开第二排。 Observerd： 视图窗口不集中，底部内容是不可见和不可访问。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " CodeGo.net <html xmlns=" CodeGo.net <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/CodeGo.net />"stylesheet" type="text/css" href="http://www.mamicode.com/CodeGo.net />"stylesheet" type="text/css" href="http://www.mamicode.com/CodeGo.net />"stylesheet" type="text/css" href="http://www.mamicode.com/CodeGo.net />"text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "text/javascript" src="http://www.mamicode.com/CodeGo.net "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 = http://www.mamicode.com/["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>
4. 或
beforeShowForm: function(form) {$("#editmod" + gridId).addClass("centered"); }其中gridId是网格的ID，然后在CSS是这样的：
div.centered { position: fixed; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px;}
如何居中jqGrid的弹出模式窗口
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。