HTML按鈕實現！！！檔案上傳，遮罩層

標籤：nbsp   element   put   border   onclick   lte   click   設定   lock   

       按鈕上傳檔案：

         

 <input type="file" />

file的意思為提交    

 

 

 

      每個遊覽器的顯示方式都不一樣哦

     

      遮罩層：   設兩個id

 

<style type="text/css">         #bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001; opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}         #show{display: none;  position: absolute;  top: 25%;  left: 22%;  width: 53%;  height: 49%;  padding: 8px;  border: 8px solid #E8E9F7;  background-color: white;  z-index:1002;  overflow: auto;}             </style>

 

 

 

 body部分

 

 <input id="btnshow" type="button" value="Show" onclick="showdiv();" />     <div id="bg"></div>     <div id="show">測試         <input id="btnclose" type="button" value="Close" onclick="hidediv();" />

 

 

 

 

js部分

 

 <script language="javascript" type="text/javascript">         function showdiv() {                         document.getElementById("bg").style.display = "block";             document.getElementById("show").style.display = "block";         }         function hidediv() {             document.getElementById("bg").style.display = ‘none‘;             document.getElementById("show").style.display = ‘none‘;         }     </script>

 

 

 

：

 

 

其中bg為遮罩層，設定透明度與隱藏

  show為白色框子

HTML按鈕實現！！！檔案上傳，遮罩層