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>
