jQuery Dialog Pop out - 向下滚动页面时的定位问题 [英] jQuery Dialog Pop outs - positioning issue when scrolling down the page
问题描述
在这里开始之后:新的谷歌日历,弹出和事件,如果它们不适合定义的区域,我现在还有一些问题和问题需要解决。
After getting a good start here: New google calendar, "pop-out" events, if they don't fit in the defined area , I now have some further questions and issues to hammer out.
以下是jQuery代码:
Here is the jQuery Code:
// Google-Calendar-Style pop-outs
$(function() {
$(".inner").each(function() {
var inner = $(this);
var popout = inner.clone().removeClass("inner");
popout.dialog({
autoOpen: false,
draggable: false,
resizable: false,
width: 150
});
var plusMore = $("<div><a href='#' onmouseover='this.style.cursor=\'pointer\''>See More...</a></div>");
plusMore.insertBefore(inner.find("> div:eq(1)"));
plusMore.click(function() {
var pos = inner.offset();
popout.dialog("option", {
position: [pos.left - 6, pos.top - 4]
}).dialog("open");
});
});
});
以下是与此相关的CSS:
Here is the CSS related to this:
<style type="text/css">
.outer {
height: 45px;
overflow: hidden;
}
.inner > h1 {
margin: 0;
font-size: 1em;
}
.ui-widget.ui-dialog {
font-size: 1em;
font-family: inherit;
padding: 2px 5px;
}
.ui-dialog div.ui-dialog-titlebar {
padding: 0;
background: transparent none;
border-width: 0;
}
.ui-dialog div.ui-dialog-content {
padding: 0;
}
</style>
这是HTML(注意,我实际上使用Smarty在这里循环一些数组,但这是base ...最内层< div>
重复每个循环(用户)(所以有一个外部
和一个内部
,每个单元格):
Here is the HTML (note, I actually use Smarty to loop some arrays here, but this is the base... the inner most <div>
is repeated with each loop (user) (so there is one outer
and one inner
, per cell):
<div class="outer">
<div class="inner">
<div>
<a href=Tenant.php" style="text-decoration:none">{$tenant.firstName} {$tenant.lastName}</a><br>
<a href="Message.php">Send Message</a><br>
</div>
</div>
</div>
这是一个截图,其中包含两个我想解决的问题。
Here is a screenshot with two problems I'd like to fix.
-
当我向下滚动页面(甚至一点点),然后点击查看更多... - 弹出窗口位置不正确。如下图所示,它应该有已经超过了第一行/盒子 - 但它降低了很多。不要被愚弄,并认为它最终与第4个方框对齐 - 这只是一个巧合,因为即使是表格中的最后一个条目也会使屏幕上的框下限相同 - 而不是对齐。
如果我的滚动条位于页面顶部,则没有问题。
我会喜欢摆脱顶级冠军的空间。我只想让用户列表和链接从顶部开始 - 与弹出框的X位于同一行。
I would like to get rid of the space for the top title. I just want the list of users and links to begin at the top - on the same row as the pop-up box's "X."
推荐答案
jQueryUI相对于视口而不是文档定位对话框,因此您需要在计算中考虑滚动。使用 $(文件).scrollTop()
:
jQueryUI positions dialogs relative to the viewport instead of the document, so you need to account for the scroll in your calculation. Use $(document).scrollTop()
:
popout.dialog("option", {
position: [
pos.left - 6 - $(document).scrollLeft(),
pos.top - 4 - $(document).scrollTop()
]
});
这篇关于jQuery Dialog Pop out - 向下滚动页面时的定位问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!