遮罩兩種關閉方法：
1 點擊X號關閉
HTML代碼
<body> <section> <p> 頁面內容<br /> 頁面內容<br /> 頁面內容<br /> 頁面內容<br /> 頁面內容<br /> 頁面內容<br /> </p> <a href="javascript:tanchu();" class="joinUs">我要彈出框</a> </section> <!--遮罩--> <div class="jinrErweima"> <div class="erweima"> <img src="images/temp/jinrErweima.png" alt=""/> <span class="close"></span> </div> </div> </body>
css 代碼
灰色的遮罩是一個大的div ，設置固定定位，背景色用rgba（），
.jinrErweima{width:100%;height:100%;background-color: rgba(0,0,0,0.7);position:fixed;top:0;left:0;display: none;z-index: 2;} .erweima{width: 600px;height: 166px;margin:auto;position: absolute;top:0;bottom:0;left:0;right:0;} .jinrErweima img{width: 600px;} .jinrErweima span{display: inline-block;width: 34px;height: 34px;cursor: pointer;position:absolute;left:552px;top:0;}
jQuery 代碼
// 點擊左側[我要投資]彈出遮罩層 function tanchu(){ $('.jinrErweima').show(); } // 點擊 [X]號關閉遮罩層 $('.jinrErweima span').click(function(){ $('.jinrErweima').hide(); });
2 點擊空白處關閉
html 代碼
<body>
<section>
<p>
頁面內容<br />
頁面內容<br />
頁面內容<br />
頁面內容<br />
頁面內容<br />
頁面內容<br />
</p>
<a href="javascript:chakan();" class="joinUs">我要彈出</a>
</section>
<!--遮罩-->
<div class="tanchuang">
<div class="tableBox">
<table style="width:540px;height:160px">
<tr class="firstLine">
<td>類型</td>
<td>單卡單筆上限（元）</td>
<td>單卡單日上限（元）</td>
<td>季度累計上限（元）</td>
<td>開通方法</th>
</tr>
<tr>
<td>口令卡</td>
<td>6000</td>
<td>2萬</td>
<td>——</td>
<td>櫃台</td>
</tr>
<tr>
<td>簽約</td>
<td>——</td>
<td>——</td>
<td>——</td>
<td>櫃台</td>
</tr>
<tr>
<td>證書</td>
<td>——</td>
<td>——</td>
<td>——</td>
<td>櫃台</td>
</tr>
</table>
</div>
</div>
</body>
css代碼
.tanchuang{position:fixed;height: 100%;width: 100%;top:0;left:0;z-index: 2;background-color: rgba(0,0,0,0.7);display: none;}
.tableBox{width:540px;height:160px;position:absolute;margin:auto;top:0;left:0;bottom:0;right:0;}
.tanchuang table{text-align: center; border-collapse: collapse;background-color: white;color:#666;border-radius:12px;overflow:hidden}
.tanchuang table .firstLine{background-color: #F7F1F1;}
table tr td{ border-bottom:1px solid #E6E6E6;padding: 0 12px;}
jQuery 代碼
var chakan = $('.theBank .chakan'); chakan.click(function(){ $('.tanchuang').show(); }) //點擊空白處彈窗消失 $('.tanchuang').bind('click',function(e){ var target = e.target; if(target.closest('table')==null){ $('.tanchuang').hide(); }; })
2 點擊空白處關閉(2)
由於closet（）方法ie瀏覽器的支持性並不是很好。所以，后來又用了另一種方法
相關知識點：
1 <a href="javascript:chakan();" class="joinUs">我要彈出</a>
關於a鏈接 href 的用法
javascript:是表示在觸發<a>默認動作時，執行一段JavaScript代碼，而javascript:;表示什么都不執行，這樣點擊<a>時就沒有任何反應。上面一句表示點擊a的時候執行js的chakan()函數。
2 target.closest('table')==null
關於closet（）函數
3 position:absolute;margin:auto;top:0;left:0;bottom:0;right:0;
可以實現元素垂直水平居中
關於a標簽href的用法，看下一篇 a標簽中href=""的幾種用法