先来张效果图：
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;}
当点击触发按钮时，弹出浮层，我在浮层四周加了点效果。