由於最近的項目用到彈出浮層來顯示信息或者獲得用戶輸入，這樣的好處是僅僅只用一個頁面就可以實現多個頁面的功能，不用多寫或者多跳轉幾個頁面，所以就簡單研究了一下浮層實現的一種原理，並記錄下以后就可以自己寫自己應用了。
先介紹一下其實現的原理吧：在CSS里有一個屬性叫做z-index，表示每個元素之間的堆疊關系，其值越大，就越在頂層，而其值越小則越在底層。所以假設我們現在的頁面的z-index值為1，然后我們加載一個和當前頁面大小寬高完全相同而且有一定透明度的Div命名為fullScreen，其z-index值姑且設置為9999，這樣一來fullScreen就霸占在整個頁面的最頂層，下面的頁面就無法點擊或者任何其他操作，但是fullScreen是有透明度的，所以底下的頁面是可見的。隨后我們再加載一個z-index為10000的div命名為floatLayer，這樣floatLayer又會顯示在fullScreen的上方，從而產生浮動的效果。
接下來看看實現過程，首先是隨便寫一個簡單的頁面，分別設置body和a的樣式如下所示：
點擊“出現浮層”后，body部分首先加載一個z-index為9999的Div(fullScreen)，其透明度0.7，背景黑色：
注意這個時候fullScreen已經霸占到屏幕的最頂層了，只不過由於透明度所以你才能看到之前的頁面
隨后再加載一個z-index為10000的Div(floatLayer)，背景白色，由於10000比9999還要大，所以此時floatLayer霸占了最高點，但是其大小比較小，所以我們還可以看見fullScreen。注意floatLayer和fullScreen為同胞關系，若是寫成父子關系則會導致floatLayer也繼承透明屬性，不好調節。
最后點擊隱藏就把fullScreen和floatLayer全部remove掉即可，如圖背景又變成了銀色：
簡要代碼如下：
<!doctype html>
<html>
<head>
<!--引入JQuery文件-->
<script src="../jquery-3.1.0.min.js"></script>
<title>浮層的簡單原理</title>
<style>
/*body初始狀態,清間距,設置背景*/ body { margin: 0; padding: 0; background-color: silver;
}
/*超鏈接的樣式:藍色按鈕*/ a { display: inline-block; width: 100px; height: 50px; font:normal normal normal 18px/50px 'Microsoft Yahei'; background-color: #00b3ee; text-align: center; margin: 100px 200px; text-decoration: none; border-radius: 5px;
}
/*人為制造一個占據整個屏幕的Div,其透明度為0.7且z-index為9999使之前的頁面被壓在底層無法點擊*/ #fullScreen { position: fixed; width: 100%; height: 100%; left: 0; top: 0; opacity: 0.7; background-color: black; z-index: 9999;
}
/*浮層,可隨意設置大小寬高，但是z-index必須比上面fullScreen大才能顯示出來*/ #floatLayer { position: fixed; width: 500px; height: 500px; left: 34%; top: 15%; background-color: white; z-index: 10000;
}
</style>
</head>
<body>
<a href="#" id="show">出現浮層</a>
</body>
</html>
<script> $("document").ready(function() { //點擊彈出浮層
$("#show").click(function() { //清除之前的樣式
$("#fullScreen,#floatLayer").remove(); $("body").append ( //占據整個屏幕Div
"<div id='fullScreen'></div>"+
//浮層區
"<div id='floatLayer'>" +
"<a href='#' id='hide'>隱藏浮層</a>"+
"</div>" ); //隱藏浮層
$("#hide").click(function() { $("#fullScreen,#floatLayer").remove(); }); }); }); </script>