js實作彈出視窗、頁面變成灰色且不可操作的範例分享_javascript技巧
- 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