先來張效果圖：
HTML代碼如下：
1 <body> 2 <div class="bg" id="bg" style="display: none;"></div> 3 <div id="popup" style="position:absolute;z-index:100; display:none; background-color:#fff;"> 4 <div id="close" style="position:absolute; right:10px; top:10px; left:auto; bottom:auto;"><a href="javascript:closeFloat();">[關閉]</a></div><br> 5 <h2>title</h2> 6 <p>浙江百慕生物科技有限公司隸屬浙江麗珀集團，成立於2011年3月，注冊資本1000萬元，是一家從事海洋生物開發銷售的公司，主要旗下的優參堂海參品牌源自於盧煒翎先生創立的優參號參堂，經過一百多年的發展，現已成為最具規模化，現代化，專業化的海參加公司特與世紀聯華超市股份有限公司、物美商業集團股份有限公司、天天好大葯房等合作，在浙江省多個城市100多家門店進行銷售。<br/>此外公司還搭檔杭州電視台生活頻道《生活大參考》、杭州電視台生活頻道電商平台共同進行優參堂海參的銷售，致力於將品牌以公司本着“客戶至上，質量為本”的原則，建立健全了嚴苛的質量標准檢驗體系，除了通過國家食品認證體系之外，還委托國家輕工業食品質量監督檢測杭州站特別做了農葯、獸葯殘留檢測，海水污染檢測，以遠遠低於國家標准的檢測結果確保海參品質。</p> 7 <p>浙江百慕生物科技有限公司隸屬浙江麗珀集團，成立於2011年3月，注冊資本1000萬元，是一家從事海洋生物開發銷售的公司，主要旗下的優參堂海參品牌源自於盧煒翎先生創立的優參號參堂，經過一百多年的發展，現已成為最具規模化，現代化，專業化的海參加公司特與世紀聯華超市股份有限公司、物美商業集團股份有限公司、天天好大葯房等合作，在浙江省多個城市100多家門店進行銷售。<br/>此外公司還搭檔杭州電視台生活頻道《生活大參考》、杭州電視台生活頻道電商平台共同進行優參堂海參的銷售，致力於將品牌以公司本着“客戶至上，質量為本”的原則，建立健全了嚴苛的質量標准檢驗體系，除了通過國家食品認證體系之外，還委托國家輕工業食品質量監督檢測杭州站特別做了農葯、獸葯殘留檢測，海水污染檢測，以遠遠低於國家標准的檢測結果確保海參品質。</p> 8 <p>浙江百慕生物科技有限公司隸屬浙江麗珀集團，成立於2011年3月，注冊資本1000萬元，是一家從事海洋生物開發銷售的公司，主要旗下的優參堂海參品牌源自於盧煒翎先生創立的優參號參堂，經過一百多年的發展，現已成為最具規模化，現代化，專業化的海參加公司特與世紀聯華超市股份有限公司、物美商業集團股份有限公司、天天好大葯房等合作，在浙江省多個城市100多家門店進行銷售。<br/>此外公司還搭檔杭州電視台生活頻道《生活大參考》、杭州電視台生活頻道電商平台共同進行優參堂海參的銷售，致力於將品牌以公司本着“客戶至上，質量為本”的原則，建立健全了嚴苛的質量標准檢驗體系，除了通過國家食品認證體系之外，還委托國家輕工業食品質量監督檢測杭州站特別做了農葯、獸葯殘留檢測，海水污染檢測，以遠遠低於國家標准的檢測結果確保海參品質。</p> 9 </div> 10 <a onClick="javascript:generateFloatLayer()" style="margin:200px auto;display:block;">點擊生成浮動層</a> 11 </body>
JS代碼：
1 function generateFloatLayer() { 2 floatArea = document.getElementById("popup"); 3 /*floatArea.style.display = "none";*/ 4 /*divClose = '<div id="close" style="position:absolute; right:10px; top:10px; left:auto; bottom:auto;"><a href="javascript:closeFloat();">[關閉]</a></div><br>';*/ 5 x = event.clientX + document.body.scrollLeft; 6 y = event.clientY + document.body.scrollTop; 7 /*floatArea.innerHTML = divClose + "<div id=\"floatcontent\">some content</div>";*/ 8 /*floatArea.style.border = "black 1px solid";*/ 9 /*floatArea.style.left = (document.documentElement.scrollLeft + x - 15) + "px";*/ 10 floatArea.style.left ="20%"; 11 <!--floatArea.style.top = (document.documentElement.scrollTop + y - 0) + "px";--> 12 floatArea.style.top ="10px"; 13 floatArea.style.width = "60%"; 14 floatArea.style.height = "1000px"; 15 floatArea.style.margin="10px auto"; 16 floatArea.style.display = ""; 17 18 document.getElementById("bg").style.display=""; 19 } 20 21 function closeFloat() { 22 floatArea = document.getElementById("popup"); 23 /*floatArea.innerHTML = "";*/ 24 floatArea.style.display = "none"; 25 26 document.getElementById("bg").style.display="none"; 27 }
CSS樣式：
1 .bg{ 2 width: 100%; 3 height: 100%; 4 position: fixed; 5 left: 0; 6 top: 0; 7 background-color: #ccc; 8 opacity: .6; 9 } 10 #popup{ -webkit-box-shadow:0 0 5px 5px rgba(0,0,0,.3); -moz-box-shadow:0 0 5px 5px rgba(0,0,0,.3); box-shadow:0 0 5px 5px rgba(0,0,0,.3);text-align:center;padding:10px 20px;} 11 #popup p{text-align:left; font-size:14px;margin-bottom:5px;}
當點擊觸發按鈕時，彈出浮層，我在浮層四周加了點效果。