用jQuery編寫模態彈出窗口

Question

我在嘗試瞭解模態窗口如何工作。我知道，在那裏有多個插件，但我想寫我自己的 - 一個簡單的插件。

- 我可以添加一個jQuery的函數來顯示（）隱藏層當某個元素被點擊在頁面上。

- 我可以將它加載到頁面內容的上方，但調整CSS，但我仍然不知道如何做幾件事情。

例如，如何讓頁面的其餘部分在窗口下方褪色？

謝謝。

Answer 1

您必須在模態內容和頁面的其餘部分之間使用另一個圖層。這通常稱爲覆蓋。覆蓋層呈黑色或白色（通常），略帶不透明。

爲了獲得最佳效果設置

body, html  { width: 100%; height: 100% } 

使得覆蓋不會被人體/ HTML的大小進行限制。

div.overlay  { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 12000 } 

然後附加覆蓋：

var overlay = $('<div />').css({opacity: '.8' }).addClass('overlay'); 
$('body').append(overlay); 

你從哪裏開始遇到的問題是在舊的瀏覽器如IE 6，顯示上的z-index控制元素的頂部下拉列表。爲此，您必須在內容下使用隱藏的iframe技術。

Answer 2

以jQuery's dialog爲例。它使用一個帶有顯式寬度和高度集（通過Javascript動態計算）的div元素，並且絕對位於左上角。爲了獲得褪色效果，設置了不透明背景圖像（對於IE，也應用filter: alpha(opacity = 50);）。

標記：

<div class="ui-widget-overlay" style="width: 1263px; height: 1274px; z-index: 1003;"></div> 

CSS：

.ui-widget-overlay 
{ 
    background-image: url('path/to/dark-image.png'); 
    opacity: 0.5; 
    left: 0; 
    position: absolute; 
    top: 0; 
}