?來源：http://www.php600.cn/read.php/586.htm

?

CSS代碼：

<style>?
.black_overlay{?display:?none;?position:?absolute;?top:?0%;?
left:?0%;?width:?100%;height:?100%;?background-color:?black;?
z-index:1001;?-moz-opacity:?0.3;?opacity:.30;?filter:?alpha(opacity=30);?
}?
.white_content?{?display:?none;?position:?absolute;?top:?25%;?
left:?25%;?width:?50%;height:?50%;?padding:?16px;?
border:?16px?solid?orange;?background-color:?white;?z-index:1002;?
overflow:?auto;?
}?
</style>

HTML代碼:

<p>click?<a?href?=?"javascript:void(0)"?
onclick?=?"document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'">here</a></p>?
<div?id="light"?class="white_content">模式窗口內容
<a?href?=?"javascript:void(0)"?
onclick?=?"document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'">Close</a>
<h3>www.865171.cn</h3>
</div>?
<div?id="fade"?class="black_overlay">
</div>

總結

以上是生活随笔為你收集整理的用CSS实现的模式窗口效果,弹出固定大小的窗口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。