新的博客文章將逐步轉移到我的新個人主頁:
當然主入口在這裏,點這裏纔有驚喜:
..從產品設計css一直做到linux運維的程序猿... 很多技術都是皮毛,各位見諒,只求和大家交流一點小技術,歡迎拍磚!..
1. 純CSS,完全無需JS,對JS程序猿來說一種解放!
2. IE7、8 下rgba屬性會失效,所以如果要做半透明要新加一個div,這個步驟我偷個懶就省了哈哈,重點是中間的div
3. 對於彈出層,各位針對自己的情況設置z-index,這裏我沒有設置了
4. IE6沒有測試,抱歉= =
DOM結構
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<p>
fdsfsdfsadfsdafsdafdssad
</p>
<div class="pop-wrap">
<table>
<tr>
<td>
<div class="pop">
<p>
感覺如何?
</p>
<input type="button" value="確定" />
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
stye.css :
.pop-wrap{
position: fixed;
top: 0;
background: rgba(0, 0, 0, .8);
left: 0;
width: 100%;
height: 100%;
}
.pop-wrap table {
height: 100%;
width: 100%;
}
.pop-wrap td {
width: 100%;
height: 100%;
}
div.pop {
margin: 0 auto;
width: 200px;
background: #ECECEC;
padding: 20px;
text-align:center;
}
div.pop p {
font: 200 14px/20px Microsoft YaHei;
}
div.pop input {
background: #FFFFFF;
border: 1px solid #ADADAD;
padding: 3px 10px;
border-radius : 2px;
cursor: pointer;
}