尋找JS/JQuery完全模態覆蓋

我需要一個模式覆蓋，將阻止與頁面的其餘部分的交互，並不是用戶可以關閉，但似乎無法找到一個我不必覆蓋現有的功能（如刪除X按鈕或刪除esc-to-close功能）。尋找JS/JQuery完全模態覆蓋

任何人都知道可以做到這一點的JQuery插件或其他JS庫嗎？更小更簡單更好...

其實這是相當直接的寫我自己（覆蓋整個頁面100％透明的div），但它很難完美（如果用戶調整窗口大小？怎麼辦跳格？）。所以理想情況下我會使用一個插件，但我討厭爲我的需求配置插件，因爲它們對我來說似乎從來都不是完美的！

2011-09-29 Tony R

如果你告訴我們爲什麼你要找這個，回答你的問題會更容易。當模式啓動時，您不希望用戶與您的網站進行交互的目的是什麼？你有什麼問題需要刪除X按鈕？更加詳細一些。 –

爲什麼？我想我很清楚地描述了這個問題。我正在執行一個AJAX操作，在進行時，我想阻止用戶與整個頁面進行交互（你可以說「進度微調器？」）。必勝客的訂購系統會在您的訂單正在處理時完成這件事。改變一個現有的插件是很麻煩的，原因很多，主要的原因是很難確切地知道引擎蓋下發生了什麼。我更喜歡一個內置此功能的插件。這不是一個常見問題嗎？ –

如果我們知道你爲什麼問這個問題，它只是讓問題更容易回答。對我來說，最簡單的方法就是在中心使用.gif（進度微調器）覆蓋div，然後在AJAX操作完成時將其淡出。 –

http://developer.yahoo.com/yui/examples/container/panel-loading.html

幸運的是，我使用的是YUI已經，只是忽略了這個。正是我想要的。

來源

2011-09-29 03:09:39

這很酷 –

我同意！看看這個例子，你甚至可以指定要放入標題和正文的內容。自定義進度微調GIF傳入！ –

我認爲只是添加覆蓋div會比使用任何庫更容易，需要更少的代碼。

$('<div></div>').css({ top: 0, bottom: 0, left: 0, right: 0, position: absolute, zIndex: 1000 }).appendTo(document.body);

來源

2011-09-29 03:00:23

這也不能解決tab鍵問題。我有一個公司正在編寫大量JavaScript框架的同事，他們花了相當多的時間來完善模態疊加和對話。所以我知道完成這種事情有很多怪癖，因此我正在尋找一個插件/ lib。 –

可以扳指了與只是覆蓋的div絕對定位上，左，右，下CSS通過其容器0，像這樣：

HTML

<div class="overlay"></div> 
<div class="content"> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
    <button type="button">Click Me!</button> 
</div>

CSS

.content { 
    width:400px; 
    height:400px; 
    position:relative; 
    z-index:1; 
} 

.overlay { 
    opacity:0; 
    filter: alpha(opacity = 0); 
    position:absolute; 
    top:0; bottom:0; left:0; right:0; 
    display:block; 
    z-index:2; 
    background:transparent; 
}

演示http://jsfiddle.net/andresilich/WHEK3/4/

來源

2011-09-29 03:15:02

這受到提及的標籤問題@OP的影響 –

尋找JS/JQuery完全模態覆蓋

回答

相關問題