1.讓層始終顯示在屏幕正中間：

樣式代碼：

1. .model{
2. position: absolute; z-index: 1003;
3. width:320px; height:320px; text-align:center;
4. background-color:#0066FF; display: none;
5. }

jQuery代碼：

1. //讓指定的DIV始終顯示在屏幕正中間
2. function letDivCenter(divName){
3. var top = ($(window).height() - $(divName).height())/2;
4. var left = ($(window).width() - $(divName).width())/2;
5. var scrollTop = $(document).scrollTop();
6. var scrollLeft = $(document).scrollLeft();
7. $(divName).css( { position : ‘absolute‘, ‘top‘ : top + scrollTop, left : left + scrollLeft } ).show();
8. }

html代碼：

1. <a href="javascript:;" onclick="letDivCenter(‘#model‘)">點我讓DIV始終顯示在屏幕中間</a><br />
2. <div>
3. <div id="model" class="model">
4. 這是內容（不過沒有垂直居中顯示）希望各位高手，能夠補充。小弟在此謝過了。
5. </div>
6. </div>

運行一下看看效果吧。

接下來總結一下，將它們整合成一個。即，當彈出ｄｉｖ層的時候，同時也要彈出遮罩層，好，廢話不多說，看代碼：

　　　１。ＣＳＳ樣式：

1. <style type="text/css">
2. .mask {
3. position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
4. z-index: 1002; left: 0px;
5. opacity:0.5; -moz-opacity:0.5;
6. }
7. .model{
8. position: absolute; z-index: 1003;
9. width:320px; height:320px; text-align:center;
10. background-color:#0066FF; display: none;
11. }
13. </style>

　　　２。Ｊquery代碼：

1. <script type="text/javascript">
2. //兼容火狐、IE8
3. function showMask(){
4. $("#mask").css("height",$(document).height());
5. $("#mask").css("width",$(document).width());
6. $("#mask").show();
7. }
8. //讓指定的DIV始終顯示在屏幕正中間
9. function letDivCenter(divName){
10. var top = ($(window).height() - $(divName).height())/2;
11. var left = ($(window).width() - $(divName).width())/2;
12. var scrollTop = $(document).scrollTop();
13. var scrollLeft = $(document).scrollLeft();
14. $(divName).css( { position : ‘absolute‘, ‘top‘ : top + scrollTop, left : left + scrollLeft } ).show();
15. }
16. function showAll(divName){
17. showMask();
18. letDivCenter(divName);
19. }
20. </script>

3.HTML代碼：

1. <div id="mask" class="mask"></div>
2. <a href="javascript:;" onclick="showMask()" >點我顯示遮罩層</a><br />
3. <a href="javascript:;" onclick="letDivCenter(‘#model‘)">點我讓DIV始終顯示在屏幕中間</a><br />
4. <a href="javascript:;" onclick="showAll(‘#model‘)">點我顯示所有</a><br />
5. <div>
6. <div id="model" class="model">
7. 這是內容（不過沒有垂直居中顯示）希望各位高手，能夠補充。小弟在此謝過了。
8. </div>
9. </div>

JQuery 彈出層，始終顯示在屏幕正中間