zoukankan      html  css  js  c++  java
  • 透明框

    就是相关控件的显示(展开)

    opacity是透明度的设置
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="gb2312"> 
    <meta name="author" content="http://www.softwhy.com/" /> 
    <title>蚂蚁部落</title> 
    <style type="text/css"> 
    #fade { 
    display:none; 
    position:absolute; 
    top:0%; 
    left:0%; 
    100%; 
    height:100%; 
    background-color:black; 
    z-index:1001; 
    -moz-opacity:0.8; 
    opacity:.80; 
    filter:alpha(opacity=80); 
    } 
    #light{ 
    display:none; 
    position:absolute; 
    top:25%; 
    left:25%; 
    50%; 
    height:50%; 
    padding:16px; 
    border:3px solid orange; 
    background-color:#3333cc; 
    z-index:1002; 
    overflow:auto; 
    } 
    </style> 
    <script type="text/javascript"> 
    window.onload=function(){ 
    var linkbt=document.getElementById("linkbt"); 
    var light=document.getElementById('light'); 
    var fade=document.getElementById('fade'); 
    var closebt=document.getElementById("closebt"); 
    linkbt.onclick=function(){ 
    light.style.display='block'; 
    fade.style.display='block'; 
    } 
    closebt.onclick=function(){ 
    light.style.display='none'; 
    fade.style.display='none'; 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <a href="javascript:void(0)" id="linkbt"> 点击这里打开窗口</a> 
    <div id="light"><a href="javascript:void(0)" id="closebt">关闭窗口</a></div> 
    <div id="fade""></div> 
    </body> 
    </html> 
    

      

  • 相关阅读:
    Log4Net使用
    4月博文
    论坛题目练习
    职场冷笑话两则
    初识管理的一些心得
    Project中分清楚挣值项
    预留规划项
    小感触
    好事多磨,好事成双
    忧郁
  • 原文地址:https://www.cnblogs.com/souroot/p/4296863.html
Copyright © 2011-2022 走看看