jQuery UI的模態對話框應該被固定在滾動

是否有可能解決的jQuery UI的模式窗口，因此當用戶使用右側的滾動條，滾動背後的一面，但模態窗口下榻修復？jQuery UI的模態對話框應該被固定在滾動

2011-09-28 Niko Nik

與固定位置創建一個CSS類：

.fixed-dialog{ 
    position: fixed; 
    top: 50px; 
    left: 50px; 
}

那麼類追加爲一體的選項的一部分，當你創建對話框：

$(".selector").dialog({ dialogClass: 'fixed-dialog' });

這裏是一個工作示例：http://jsfiddle.net/3hrSv/ 這個例子並不太華麗，因爲我無法使用jsfiddle來設置對話框的樣式。

如果您想居中對話框中的屏幕中間嘗試設置在你的CSS top:50%; left:50%;所建議：http://css-tricks.com/320-quick-css-trick-how-to-center-an-object-exactly-in-the-center/

來源

2011-09-28 13:58:02

風格加入到撥弄：http://jsfiddle.net/3hrSv/2/ –

好，但layoer將不居中。它將保持50px頂部和50px左，但這不是中心。如何居中？ –

Niko Nik我更新了我的答案來處理居中，我沒有意識到你想保持居中。 –

如果你希望所有的對話框中有此行爲，您可以修改您jquery.ui.dialog.css文件。

變化：

.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }

要：

.ui-dialog { position: fixed; padding: .2em; width: 300px; overflow: hidden; }

，或者，如果你想保留原始文件，只需添加一行：

div.ui-dialog {position:fixed;}

你的CSS的一個該頁面引用的文件或頁面上的樣式塊。

來源

2013-11-27 17:13:46 James

這是一個老問題，但我發現，詹姆斯的回答（以JQuery的div.ui-對話框修改到的位置是：固定的）提供了答案的一半了這個問題。另一半是這樣的：確保父元素的高度是100％。就我而言，身體是父母給我的對話，讓我有這樣一行：

<body style='height: 100%; min-height: 100%;'>

也就是說，再加上詹姆斯的建議，加入到我的CSS文件：

div.ui-dialog {position:fixed;}

...終於讓我的對話框出現在瀏覽器窗口的中心，並在滾動時停留在那裏。希望這有助於未來可能通過這裏的谷歌玩家。

來源

2015-04-04 05:26:35

或者當你創建應用CSS：

 $("#Modal").dialog({ 
     autoOpen: false, 
     width: 500, 
     height: 'auto', 
     position: [50, 150], 
     create: function (event) { 
      $(event.target).parent().css({ 'position': 'fixed', "left": 50, "top": 150 }); 
      } 
     });

來源

2016-07-15 13:23:29

jQuery UI的模態對話框應該被固定在滾動

回答

相關問題