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彈出窗口滾動

回答

相關問題