<input id="Button1" type="button" value="點擊彈出層"/>? ? ? ?
?? ??? ?<!--彈出層時背景層DIV-->
?? ??? ?<div id="fade" class="black_overlay"></div>
?? ??? ?<!-- 編輯框 可以加自己的樣式 -->
?? ??? ?<div id="MyDiv" class="white_content">
?? ??? ??? ?點擊陰影處退出?。?！
</div>

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.8;
? ? ? ? ? ? opacity: .80;
? ? ? ? ? ? filter: alpha(opacity=80);
? ? ? ? }

? ? ? ? .white_content {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 10%;
? ? ? ? ? ? left: 10%;
? ? ? ? ? ? width: 80%;
? ? ? ? ? ? height: 80%;
? ? ? ? ? ? border: 16px solid lightblue;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? z-index: 1002;
? ? ? ? ? ? overflow: auto;
? ? ? ? }

? ? ? ? .white_content_small {
? ? ? ? ? ? display: none;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? top: 20%;
? ? ? ? ? ? left: 30%;
? ? ? ? ? ? width: 40%;
? ? ? ? ? ? height: 50%;
? ? ? ? ? ? border: 16px solid lightblue;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? z-index: 1002;
? ? ? ? ? ? overflow: auto;
? ? ? ? }
</style>

jquery方法：

<script type="text/javascript">
?? ??? ?$("#Button1").click(function() {
?? ??? ??? ?document.getElementById("MyDiv").style.display = 'block';
?? ??? ??? ?document.getElementById("fade").style.display = 'block';
?? ??? ??? ?var bgdiv = document.getElementById("fade");
?? ??? ??? ?bgdiv.style.width = document.body.scrollWidth;
?? ??? ??? ?$("#fade").height($(document).height());
?? ??? ?});
?? ??? ?//關(guān)閉彈出層
?? ??? ?$("#fade").click(function() {
?? ??? ??? ?document.getElementById("MyDiv").style.display = 'none';
?? ??? ??? ?document.getElementById("fade").style.display = 'none';
?? ??? ?});
</script>

效果圖：