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>网络图片 :</span> 136 <input type="text"> 137 <input type="button" value="提取"> 138 </div> 139 <div class="url_file"> 140 <span>上传图片 : </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>