css:
1 .upload-img{
2 width:80%;
3 position:fixed;
4 top:50%;
5 left:50%;
6 margin-left:-40%;
7 #fff;
8 border-radius: 10px;
9 z-index:1000;
10 display:none;
11 }
12 .upload-img>p:first-child{
13 height:50px;
14 line-height: 50px;
15 border-bottom:2px solid #ccc;
16 padding:0 20px;
17 font-size: 2.2rem;
18 }
19 #open-picture,#open-camera{
20 height:40px;
21 line-height: 40px;
22 padding:0 20px;
23 font-size: 2rem;
24 cursor: pointer;
25 }
26 #open-picture{
27 border-bottom:1px solid #ccc;
28 }
29 .mask{
30 background:#000;
31 opacity: 0.8;
32 width:100%;
33 height:100%;
34 z-index:999;
35 position: fixed;
36 top:0;
37 left:0;
38 display: none;
39 }
40
41 #picture,#camera{
42 position:absolute;
43 top:0px;
44 left:0px;
45 width:100%;
46 height:100%;
47 margin:0px;
48 opacity: 0;
49 filter: "alpha(opacity=0)";
50 filter: alpha(opacity=0);
51 -moz-opacity: 0;
52 }
html:
1 <p><img src="默认显示图片的路径地址" id="img"></p>
2 <form action="" id="upload-img" runat="server" method="post" enctype="multipart/form-data">
3 <div class="upload-img">
4 <p>上传照片</p>
5 <div style="position:relative;">
6 <p id="open-picture"><span class="glyphicon glyphicon-picture rMar10"></span>相册</p>
7 <input type="file" name="picture" capture="camera" id="picture"/>
8 </div>
9 <div style="position:relative;">
10 <p id="open-camera"><span class="glyphicon glyphicon-camera rMar10"></span>拍照</p>
11 <input type="file" name="camera" accept="image/*" id="camera"/>
12 </div>
13 </div>
14 </form>
js:
1 $("#img").click(function(){
2 $(".upload-img").show();
3 $(".mask").show();
4 });
5 $(".mask").click(function(){
6 $(".mask").hide();
7 $(".upload-img").hide();
8 });