2014-06-24 53 views
2

在我的網站中,我一直在使用很多對話框,並且工作正常。但是最後加入的行爲很奇怪。當我打開對話框時,對話框顯示不在屏幕中央,但向下移動 - 我必須向下滾動才能看到它。jQuery中對話框的奇怪行爲

我想這個代碼後打開它爲中心的對話框:

$('#mydialog').dialog({ 
     autoOpen: false, 
     height:400, 
     width:600, 
     draggable: false,//solve another my problem with dialog 
     modal: true, 
     open: function(){ 
      $('#mydialog').position().left = 0; 
      $('#mydialog').position().top = 0; 
     ... 

也試過:

position: 'top', 

position: 'center', 

position: ['center', 'top'], 
0123打開後屏幕上

 open: function(){ 
      $(this).scrollTop(); 

沒有中心對話框。我正在使用jQuery v1.9.1和jQuery UI v1.10.3。

編輯: 定位&相對絕對存在問題。 我試過這段代碼:

 open: function(){ 
      var x= 0; 
      var y= 0; 
      $(this).dialog('option', 'position', [y, x]); 

位置0,0: enter image description here 而只是一個向下滾動鼠標滾輪: enter image description here

編輯:
沒有與隱藏的元素沒有問題:<input type='text' style='width: 0; height: 0; top: -100px; position: absolute;'/>上html對話框的開始。但如果我刪除此行,它會導致另一個問題:jQuery UI datepicker opens automatically within dialog日期選擇是自動打開後對話框打開

(重要信息:對話框打開是在錶行點擊第一列後)

EDIT2: 有是我的網站的切割版本: http://users16.jabry.com/testingpurpose/ko.asp 我需要在最後一個選項卡上的第一列中單擊鏈接後始終居中對話框。點擊後,打開的對話框可能沒有彈出日曆minidialog。

編輯3: 像我的問題:http://is.gd/1Hn5p6

+0

噸,可能是想錯了,但我的直覺說你正在使用的插件,你沒有寫你自己,你有沒有在你的問題中提到... – relic

+1

如果你提供了一個鏈接到你的網站,或一個jsfiddle,這將是非常有幫助的。 – climbinghobo

+0

好的,有我的網站的切割版本: (緩慢freehosting,耐心) http://users16.jabry.com/testingpurpose/ko.asp – Jerry1

回答

1

前段時間我有類似的問題,基本上當一個對話框初始化時,它將焦點設置到第一個活動表單元素,在你的情況下日曆。

一個快速的解決辦法是像

open: function() { 
    $("#id-calendar").blur(); //or 
    $("#id-calendar").datepicker("hide"); 
} 

另外,如果你使用他們的飛行,像$('<div></div>').dialog(...);

如果從遠程內容加載它們總是這樣的對話可能會有意想不到的問題:事情 $('.div').html(contentHtml).dialog(...);

+0

I只有Default.asp(和ajax post請求的query.asp),並且在這個文件中我有對話填充(html)和空白輸入編輯。只需點擊列名Alex就可以從DB填充此對話框數據(通過query.asp發送ajax post請求)。沒有動態遠程呼叫。 – Jerry1

+0

有我的問題img - 仍然不明白,怎麼可能,對話不居中 - 巨大的頂級位置... http://is.gd/1Hn5p6我對這個問題越來越瘋狂(試圖找到超過7天的解決方案)。 – Jerry1

+1

我找到解決方案!問題出現在ajax post請求返回值(第一個表列)中的格式如下: ' Jerry1

0

如果這是任何形式的彈出窗口,則定位邏輯,使其中心應該是相當接近的東西:

left: $('#parent').width/2 - ($('#thing-to-center).width/2); 
top: $('#parent').height/2 - ($('#thing-to-center).height/2); 

但如果這是一個你不熟悉的插件,並且偏移看起來很小且任意,我會拉起瀏覽器控制檯並使用檢查器工具來查找可能影響父對齊的奇怪填充/邊距的子元素。

+0

我嘗試了一些新的東西 - 只編輯我的第一個問題(本主題的開始)。請找到它。 – Jerry1

+0

我發現隱藏的元素: 開始html對話框。但是,如果我刪除此行,它會導致另一個問題: http://stackoverflow.com/questions/932420/jquery-ui-datepicker-opens-automatically-within-dialog datepicker會在對話框打開後自動打開 – Jerry1