{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 对你真心纯属浪费 的问题《jQuery UI dialog box not positioned center screen》','https://www.manongdao.com/q-73200.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have a jQuery dialog box that is meant to position in the middle of the screen. However, it seems slightly off-center vertically.
Here is the code:
$('#add_box').dialog({
autoOpen: true,
width: 300,
modal: true,
resizable: false,
bgiframe:true
});
Any ideas why this won't center?
This issue is often related to opening the dialog via an anchor tag (
<a href='#' id='openButton'>Open</a>) and not preventing the default browser behaviour in the handler e.g.This usually removes the need for any positioning / scrolling plugins.
I was facing the same issue of having the dialog not opening centered and scrolling my page to the top. The tag that I'm using to open the dialog is an anchor tag:
<a href="#">View More</a>The pound symbol was causing the issue for me. All I did was modify the href in the anchor like so:
<a href="javascript:{}">View More</a>Now my page is happy and centering the dialogs.
Just solved the same problem, the issue was that i did not imported some js files, like widget.js :)
Simply add below CSS line in same page.
I had to add this to the top of my HTML file:
<!doctype html>. I did not need to set thepositionproperty. This is with jQuery 3.2.1. In 1.7.1, that was not needed.Are you adding jquery.ui.position.js to your page? I had the same problem, checked the source code here and realized I didn't add that js to my page, after that.. dialog magically centered.