jQuery弹出窗口滚动

需求非常简单，我需要在用户点击的表格（X和Y坐标）点击链接时弹出一个弹出窗口。用户可以从网页上的列表中添加表格。jQuery弹出窗口滚动

当用户第一次点击一个链接时，弹出窗口显示在正确的位置，但窗口滚动到底部（焦点移到底部），并且在表格下面创建了很多额外的空间。这很烦人，因为现在用户必须向上滚动才能看到表格和弹出窗口。有趣的是，这只发生在IE（版本7.0）上。我使用Firefox进行测试，它工作得很好。

任何帮助将不胜感激。

感谢注：Kunal

来源

2011-03-18 Kunal

听起来像是你有一个锚链接（例如#footer的），它是跳跃到（请注意，我给会跳为它会使用任何ID作为锚点的例子）。

你应该在javascript事件上调用.preventDefault()。如（jQuery的）：

$('a').click(function(e) { 
    e.preventDefault(); 
    //other code... 
});

有关意见代码：

//get current position 
var event = getEvent (ffEvent); 
event.preventDefault(); 
jQuery("#"+oMatrixModel.m_sPortletNameSpace+"popupDiv").dialog({ 
position: [event.clientX,event.clientY], modal: true, 
resizable:false , height: 'auto', dialogClass: 'alert' 
});

来源

2011-03-18 14:58:05

我刚刚在IE 8上测试了我现有的代码，它在那里也能正常工作。所以，我想这个问题只是IE 7 – Kunal 2011-03-18 15:02:03

嗯，它听起来仍然是这个问题。您点击的链接的“href”是什么？ – 2011-03-18 15:04:01

嗯，这是一个传统的应用程序，它使用JSP标签库在飞行中生成HTML ... 13.2105 – Kunal 2011-03-18 15:15:37

家伙，我终于得到它的工作，它实际上是一个CSS问题。我添加了下面的代码片段到我的应用程序使用的一个CSS，并且一切正常：

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } 
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } 
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } 
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } 
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } 
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } 
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } 
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } 
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } 
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } 
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } 
.ui-draggable .ui-dialog-titlebar { cursor: move; }

来源

2011-03-23 20:34:40 Kunal

加上.ui-dialog {position：absolute;}为我工作+1。 – Zeb 2013-01-21 15:18:02

jQuery弹出窗口滚动

回答

相关问题