首頁  >  文章  >  web前端  >  js實作彈出視窗、頁面變成灰色且不可操作的範例分享_javascript技巧

js實作彈出視窗、頁面變成灰色且不可操作的範例分享_javascript技巧

WBOY
WBOY原創
2016-05-16 16:48:571288瀏覽

如果你還不會,可以看看下面這個簡單的例子。

複製代碼 代碼如下:



彈出一個視窗後,後面的層不可操作
<script><BR>function show()  //顯示隱藏層和彈出層<BR>{<BR>   var hideobj=document. getElementById("hidebg");<BR>   hidebg.style.display="block";  //顯示隱藏層<BR>   hidebg.style.height=document.body.clientHeight "px";  //設定隱藏層的高度為目前頁面高度<BR>   document.getElementById("hidebox").style.display="block";  //顯示彈出層<BR>}<BR>function hide()  //去除隱藏層和彈出層<BR>{<BR>   document.getElementById("hidebg").style.display="none";<BR>   document.getElementById("hidebox").style.display="none";<BR>}<BR>}<BR>< /script><BR><style><BR>   body { margin:0px;padding:0px;text-align: center;}<BR>   #hidebg { position:absolute;left:0pxtop:0px; background-color:#000;<BR>      width:100%;  /*寬度設定為100%,以便隱藏背景層覆蓋原頁*/<BR>      filter:alpha(opacity=6);為60%*/<BR>      opacity:0.6;  /*非IE瀏覽器下設定透明度為60%*/<BR>      display:none; /* http://www.jb51.net *<b51.net *< -Index:2;}<BR>   #hidebox { position:absolute;width:400px;height:300px;top:200px;left:30%;background-color:#fff;display:none;cursor:pointerz--dsor:pointerz- Index:3;}<BR>   #content { text-align:center;cursor:pointer;z-Index:1;}<BR><BR><BR><body><BR><div id="hidebg"></script>

點選關閉

點試試


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn