只使用jQuery UI製作屏幕模式的一部分

是否有任何方法爲jQuery對話框創建模式「範圍」？作爲一個有點人爲的例子，我有一個頁面：只使用jQuery UI製作屏幕模式的一部分

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Console</title> 

     <link href="console.css" rel="stylesheet" type="text/css" /> 
     <link href="libs/jquery-ui/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" /> 
     <script type="text/javascript" src="libs/jquery/jquery-1.6.1.min.js"></script> 
     <script type="text/javascript" src="libs/jquery-ui/jquery-ui-1.8.13.custom.min.js"></script> 
    </head> 

    <body> 
     <div id="toolbar"></div> 
     <div id="mainContent"></div> 
     <div id="footer"></div> 
    </body> 
</html>

我想爲mainContent區域創建一些模態對話框。當對話框打開時，我不想允許與mainContent區域交互，但仍允許與工具欄和頁腳進行交互。

或者，如果一個頁面有多個mainContent-like div，每個div都有自己獨立的一組模式對話框，仍然可以與其他div進行交互。

我知道如何使用jQuery UI庫創建模態對話框;我的問題是關於將模態應用於頁面的一部分而不是整個頁面，或者使用此庫，或者以一種輕鬆補充該庫的方式。

來源

2011-06-10 Jeff

簡單的解決方案是將一個隱藏的div作爲覆蓋。它將始終具有與「mainContent」div相同的尺寸和位置。然後使用z-index在內容頂部顯示div。然後將您的模式放在疊加層上。

淨效應，所有內容都將覆蓋在主內容區域，但是您的模態將停留在覆蓋層之上，因此用戶只能與其交互。

編輯：

Z-索引管理：我會疊加的z-index正好被設置爲高基數，以避免與其他z折射率衝突。然後，無論何時顯示模式，只需要查找顯示的疊加層的jquery選擇器，並通過該數字中的一個來增加模態z-索引。

.Overlay 
{ 
    z-index: 200; 
} 

.Modal 
{ 
    //... 
} 

function ShowModal(modalId) 
{ 
    var maxZIndex = 200; 
    $('.Overlay :visible').each(function() //find all visible overlays 
    { 
     var currZIndex = $(this).attr('z-index'); 
     maxZIndex = currZIndex > maxZIndex ? currZIndex : maxZIndex; //max, min alg. 
    } 
    $('#' + modalId).attr('z-index', maxZIndex + 1); 
    //... do some positioning of modal here 
    $('#' + modalId).show(); 
}

定位：你需要寫javascript在所需區域在您的覆蓋位置。我會認爲使用絕對定位會讓這個變得容易。那麼顯然你應該把模態div放在覆蓋div的中心。

這些計算並不是很難以中心的方式定位。讓我知道你是否想讓我做那件事。

來源

2011-06-10 15:45:45

關於這種方法的一些問題/評論。我認爲我不再將對話框本身作爲模態，因爲那是我原來的問題的一部分。我是否需要爲對話框和這些疊加層手動管理z-index，或者是否有辦法獲得對話框疊加層，並設置疊加層（例如少一個）？你碰巧知道jQuery對話框是自動居中到他們的父組件還是我需要構建到這個過程中的另一個邏輯位？ – Jeff 2011-06-13 14:32:18

@Jeff我在回答問題時添加了評論以解決您詢問的問題。 – 2011-06-13 20:12:49

有沒有我可以參考這個解決方案的任何頁面？理想的解決方案對於一些僞HTML代碼來說會很棒。會嘗試自己做，併發布在這裏:) – krizajb 2014-03-08 18:44:26

只使用jQuery UI製作屏幕模式的一部分

回答

相關問題