img弹出层

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>img弹出层</title>
  7     <style>
  8     /*上传图片 弹出层*/
  9     
 10     .popupBox {
 11         position: absolute;
 12         top: 0;
 13         left: 0;
 14         width: 100%;
 15         height: 100%;
 16         background: rgba(0, 0, 0, .4);
 17         z-index: 11;
 18         display: none;
 19     }
 20     
 21     .img_popup {
 22         position: fixed;
 23         top: 30%;
 24         left: 50%;
 25         margin-left: -224px;
 26         width: 448px;
 27         height: 308px;
 28         border-radius: 2px;
 29         border: 1px solid #ccc;
 30         background-color: #fff;
 31         z-index: 12;
 32         display: none;
 33     }
 34     
 35     .img_popup_top {
 36         padding: 0 26px;
 37         height: 30px;
 38         line-height: 30px;
 39         background-color: #f9f9f9;
 40         border-bottom: 1px solid #e6e6e6;
 41     }
 42     
 43     .img_popup_top_text {
 44         color: #333;
 45         font-weight: 500;
 46     }
 47     
 48     .popup_close {
 49         float: right;
 50         font-size: 24px;
 51         cursor: default;
 52     }
 53     
 54     .img_popup_content {
 55         padding: 26px;
 56     }
 57     
 58     .img_popup_content input[type=text] {
 59         width: 190px;
 60         height: 28px;
 61         border-radius: 2px;
 62         border: 1px solid #ccc;
 63     }
 64     
 65     .img_popup_content span {
 66         font-size: 12px;
 67         color: #666;
 68     }
 69     
 70     .img_popup_content .url_file {
 71         padding: 26px 0;
 72         height: 92px;
 73     }
 74     
 75     .img_popup_content input[type=button] {
 76         margin-left: 10px;
 77         width: 50px;
 78         height: 28px;
 79         border-radius: 2px;
 80         border: 1px solid #ccc;
 81         background-color: #fff;
 82     }
 83     
 84     .img_popup_content a {
 85         display: block;
 86         width: 90px;
 87         height: 90px;
 88         border-radius: 2px;
 89         border: 1px dashed #ccc;
 90     }
 91     
 92     .img_popup_content .img_btn {
 93         text-align: center;
 94     }
 95     
 96     .img_popup_content .img_btn input {
 97         width: 124px;
 98         height: 34px;
 99         color: #fff;
100         border-radius: 2px;
101         border: none;
102         background-color: #de2230;
103     }
104     
105     #uploadImg {
106         font-size: 12px;
107         overflow: hidden;
108         position: absolute
109     }
110     
111     #file {
112         position: absolute;
113         z-index: 100;
114         margin-left: -180px;
115         font-size: 60px;
116         opacity: 0;
117         filter: alpha(opacity=0);
118         margin-top: -5px;
119     }
120     </style>
121 </head>
122 
123 <body>
124     <input id="btn" type="button" value="点我">
125     <!-- 图片弹出层 -->
126     <div id="popupBox" class="popupBox">
127     </div>
128     <div id="img_popup" class="img_popup">
129         <div class="img_popup_top">
130             <span class="img_popup_top_text">上传图像</span>
131             <span id="popup_close" class="popup_close">x</span>
132         </div>
133         <div class="img_popup_content">
134             <div class="img_url">
135                 <span>网络图片&nbsp;:</span>
136                 <input type="text">
137                 <input type="button" value="提取">
138             </div>
139             <div class="url_file">
140                 <span>上传图片&nbsp;:&nbsp;</span>
141                 <span id="uploadImg">
142                         <input type="file" id="file" size="1" >
143                         <a href="javascript:;"></a> 
144                     </span>
145             </div>
146             <div class="img_btn">
147                 <input type="button" value="确定">
148             </div>
149         </div>
150     </div>
151     <script>
152     var btn = document.getElementById("btn");
153     var popupBox = document.getElementById("popupBox");
154     var img_popup = document.getElementById("img_popup");
155     var popup_close = document.getElementById("popup_close");
156 
157     btn.onclick = function() {
158         var popHeight = document.body.clientHeight;
159         popupBox.style.height = popHeight;
160         popupBox.style.display = 'block';
161         img_popup.style.display = 'block';
162     }
163 
164     popupBox.onclick = function() {
165         this.style.display = 'none';
166         img_popup.style.display = 'none';
167     }
168 
169     popup_close.onclick = function() {
170         img_popup.style.display = 'none';
171         popupBox.style.display = 'none';
172     }
173     </script>
174 </body>
175 
176 </html>