css---遮罩層
阿新 • • 發佈:2018-12-10
<div id="body"> 顯示頁面的全部內容 <div id="open">開啟彈框</div> </div> //頁面的遮罩層 <div id="cover"></div> //頁面的彈出框 <div id="modal"> <div id="close">關閉彈框</div> </div>
<script> $(document).ready(function(){ $("#open").click(function() { cover.style.display="block"; //顯示遮罩層 modal.style.display="block"; //顯示彈出層 }) $("#close").click(function() { cover.style.display="none"; //隱藏遮罩層 modal.style.display="none"; //隱藏彈出層 }) }) </script>
#cover{ position:absolute;left:0px;top:0px; background:rgba(0, 0, 0, 0.4); width:100%; /*寬度設定為100%,這樣才能使隱藏背景層覆蓋原頁面*/ height:100%; filter:alpha(opacity=60); /*設定透明度為60%*/ opacity:0.6; /*非IE瀏覽器下設定透明度為60%*/ display:none; z-Index:999; } #modal{ position:absolute; width:500px; height:300px; top:50%; left:50%; background-color:#fff; display:none; cursor:pointer; z-Index:9999; }