模態蒙版不遮擋整個窗口

我正在嘗試在我的頁面上實現模態窗口。想法是顯示一個帶有項目屏幕快照和代碼示例的彈出窗口。現在我已經實現了帶有屏幕截圖的彈出窗口。似乎工作得很好，除了有兩個問題。模態蒙版不遮擋整個窗口

1）遮罩不覆蓋整個窗口。 2）一旦彈出窗口關閉，如果再次點擊屏幕截圖，不刷新，屏幕不會顯示。

<div class="screenshot"> 
      <div class="case"> 
       <div class="thumb"> <a id="hooversMobile" href="#dialog" name="modal" title="Hoover's Mobile Site"><img src="images/proj_over_2.png" alt="Project thumbnail" style="top: 0px; "></a> 
       </div><!-- end thumb--> 
      </div><!-- end case--> 
     </div>

.js

來源

2012-10-16 Priya

問題是？ – RASG

1）遮罩不覆蓋整個窗口。 2）一旦彈出窗口關閉，如果再次點擊屏幕截圖，不刷新，屏幕不會顯示。 – Priya

這些都是**不是**問題！只是關於你的代碼的事實。 – RASG

以下DIV具有位置相對集。這意味着任何位置：它下面的絕對元素將相對於其位置。

<div class="project" id="mobile"></div>

這是什麼導致覆蓋只從該位置延伸。

第二次點擊問題是由於#mask淡出，但沒有像在內容div上一樣運行淡出。

此外，爲了獲得更好的響應，您應該挑出部分代碼並複製到JSfiddle中。然後，您可以詢問關於重疊定位的具體問題。

來源

2012-10-16 18:52:58 Dcullen

我試着複製代碼..但在jsfiddle中工作正常。我有點修正了蒙版點擊問題（淡入/淡出），但仍然蒙版覆蓋了enitre窗口 – Priya

一旦您從#wrapper和#project刪除位置：相對。然後添加頂部：0px;和left：0px;到#mask你應該看到它全屏。 – Dcullen

認爲你可以在網站上嘗試一下變化，所以我可以看看？ – Dcullen

模態蒙版不遮擋整個窗口

回答

相關問題